我想垂直对齐我的 div
的内容。
所以基本上“Hello test”应该垂直放置在 div
的中心。
.parent {
background:blue;
float:left;
width:100%
}
.parent div {
float:left;
width:50%;
}
h1 {
font-size:50px;
margin:0;
padding:0;
}
<div class="parent">
<div>
<h1>hello!</h1>
<p>test</p>
</div>
<div>
<img src="http://placehold.it/250x250" />
</div>
</div>
最佳答案
您可以为此使用表格布局:
.parent {
background:blue;
width:100%;
display: table;
}
.parent div {
display:table-cell;
vertical-align:middle;
width:50%;
}
h1 {
font-size:50px;
margin:0;
padding:0;
}
<div class="parent">
<div>
<h1>hello!</h1>
<p>test</p>
</div>
<div>
<img src="http://placehold.it/250x250" />
</div>
</div>
关于html - 垂直对齐 div 的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31556111/