我正在尝试将一个span或div元素垂直居中放置在另一个div元素中。但是当我放进去时vertical-align: middle,什么也没发生。我尝试更改display两个元素的属性,但似乎没有任何效果。
span
div
vertical-align: middle
display
这是我目前在网页中执行的操作:
.main { height: 72px; vertical-align: middle; border: 1px solid black; padding: 2px; } .inner { vertical-align: middle; border: 1px solid red; } .second { border: 1px solid blue; } <div class="main"> <div class="inner"> This box should be centered in the larger box <div class="second">Another box in here</div> </div> </div>
这似乎是最好的方法-自我的原始文章以来已经过去了一段时间,现在应该这样做:
/* CSS file */ .main { display: table; } .inner { border: 1px solid #000000; display: table-cell; vertical-align: middle; } /* HTML File */ <div class="main"> <div class="inner"> This </div> </div>