我正在創建帶有面包屑的頁面標題。現在我想垂直對齊麪包屑。 div隨着字體大小和邊距的增大而沒有靜態高度。垂直對齊沒有靜態高度的div
<div style="display: block; float: left; width: 100%;">
\t <h1 style="float: left; text-align: left; margin: 0px;">
\t \t <i class="fa fa-star-o"> </i> Information
\t </h1>
\t <div style="float: right; vertical-align: middle;">
\t \t <a href="#" target="_self">Home</a>/Home/Home
\t </div>
</div>你可以看到我的問題的一個預覽位置：右div
使用line-height：
<div style="display: block; float: left; width: 100%;">
\t <h1 style="float: left; text-align: left; margin: 0px;">
\t \t <i class="fa fa-star-o"> </i> Information
\t </h1>
\t <div style="float: right; vertical-align: middle;line-height:40px;">
\t \t <a href="#" target="_self">Home</a>/Home/Home
\t </div>
</div>我最喜歡的方法是使用轉型排列元素
<div style="display: block; float: left; width: 100%;position: relative;">
\t <h1 style="float: left; text-align: left; margin: 0px;">
\t \t <i class="fa fa-star-o"> </i> Information
\t </h1>
\t <div style="position: absolute; top: 50%;transform: translateY(-50%);right: 0;">
\t \t <a href="#" target="_self">Home</a>/Home/Home
\t </div>
</div>上我會嘗試使用顯示：表基於垂直取向。 或者，如果你使用的現代瀏覽器，Flexbox的是你的上帝:)
<div style="display: table;">
<div style="display: table-cell; width:100%; ">
<h1 style="margin: 0px;">
\t \t <i class="fa fa-star-o"> </i> Information
\t </h1>
</div>
<div style="display: table-cell; white-space:nowrap; vertical-align: middle;">
<a href="#" target="_self">Home</a>/Home/Home
</div>
</div>改用float - display: inline-block;
.wrap{
display: block;
float: left;
width: 100%;
font-size: 0;
}
.wrap > div {
display: inline-block;
vertical-align: middle;
font-size: 16px;
width: 50%;
}
.wrap > div:nth-of-type(2){
text-align: right;
}<div class="wrap" style="">
\t <div>
<h1 style="text-align: left; margin: 0px;">
\t \t <i class="fa fa-star-o"> </i> Information
\t </h1>
</div>
\t <div>
\t \t <a href="#" target="_self">Home</a>/Home/Home
\t </div>
</div>