我正在尝试将一个 div vertical-align: middle
放在另一个 div 中,但由于某种原因,它无法正常工作。我做错了什么?
#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
}
#block {
border: 1px solid blue;
width: 500px;
height: 250px;
vertical-align: middle;
}
<div id = 'wrapper'>
<div id = 'block'> I'm Block </div>
<div>
PS: 这只是一个例子,所以不,我实际上不知道 div 的实际宽度和高度,因为它们是动态的,根据它们的内容,所以请不要留边距-top: 125px,或 padding-top: 125px 答案,或类似的答案。
最佳答案
vertical-align
属性仅适用于 inline-level 和 table-cell 元素 ( source )。在您的代码中,您使用的是 block 级 元素。
试试这个 flexbox 替代方案:
#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
display: flex; /* establish flex container */
align-items: center; /* vertically center flex items */
}
#block {
border: 1px solid blue;
width: 500px;
height: 250px;
/* vertical-align: middle; */
}
<div id='wrapper'>
<div id='block'> I'm Block </div>
<div>
在此处了解有关 flex 对齐的更多信息:Methods for Aligning Flex Items
浏览器支持: 所有主流浏览器都支持 Flexbox,except IE < 10 .一些最新的浏览器版本,例如 Safari 8 和 IE10,需要 vendor prefixes .要快速添加前缀,请使用 Autoprefixer .更多详细信息,请参阅 this answer .
关于html - 将一个 div 在另一个 div 中垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35388462/