我需要一些帮助来解决 html 和 css 中的以下按钮对齐问题。
以下fiddle显示问题
<div>
<button style="height:100px">
<div style="display:table">
<div style="display:table-cell; vertical-align:middle">
bob
<p>
bill
</p>
</div>
</div>
</button>
<button style="height:100px">
<div style="display:table">
<div style="display:table-cell; vertical-align:middle">
bob
</div>
</div>
</button>
</div>
如何让按钮在它们中间垂直对齐它们的内容?
最佳答案
我想你需要这个:
button{
height:100px;
vertical-align: top;
}
.outer{
display:table;
}
.inner{
display:table-cell;
vertical-align:middle;
}
.inner p {
margin: 0;
}
<div>
<button>
<div class="outer">
<div class="inner">
bob
<p>
bill
</p>
</div>
</div>
</button>
<button>
<div class="outer">
<div class="inner">
bob
</div>
</div>
</button>
</div>
关于html按钮多行对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37026954/