在另一个div内垂直对齐div而没有flex [英] Vertical align div inside another div without flex
本文介绍了在另一个div内垂直对齐div而没有flex的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用属性 vertical-align:middle
。垂直对齐另一个div中的div。
这是我的码。
.hello {height:100px;宽度:100px;背景颜色:黑色; vertical-align:middle;显示:inline-block; color:white;}。parent {height:400px;宽度:400px;边框:1px纯红色; display:table-cell;}
< div class = 父母> < div class =hello> hello< / div>< / div>
我引用并发现给出父级表格单元格属性和子内联 - 块作品,但仍然没有。
Html
解决方案 -lang =jsdata-hide =falsedata-console =truedata-babel =false>
.hello {height:100px;宽度:100px;背景颜色:黑色; vertical-align:middle;显示:inline-block; color:white;}。parent {height:400px;宽度:400px;边框:1px纯红色; display:table-cell; vertical-align:middle; text-align:center;}
< div class = 父母> < div class =hello> hello< / div>< / div>
How to vertically align div inside another div using property vertical-align:middle
.
Here is my code.
.hello {
height: 100px;
width: 100px;
background-color: black;
vertical-align: middle;
display: inline-block;
color: white;
}
.parent {
height: 400px;
width: 400px;
border: 1px solid red;
display: table-cell;
}
<div class ="parent ">
<div class="hello">
hello
</div>
</div>
I referred and found giving parent table-cell property and child inline-block works but still not.
Html
解决方案
Here you go.
Code Snippet:
.hello {
height: 100px;
width: 100px;
background-color: black;
vertical-align: middle;
display: inline-block;
color: white;
}
.parent {
height: 400px;
width: 400px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent ">
<div class="hello">
hello
</div>
</div>
这篇关于在另一个div内垂直对齐div而没有flex的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文