垂直对齐没有静态高度的 div答案

【问题标题】：Vertical align an div without a static height垂直对齐没有静态高度的 div
【发布时间】：2015-09-01 00:01:02
【问题描述】：

我正在创建一个带有面包屑的页面标题。现在我想垂直对齐面包屑。 div 没有静态高度，因为它会随着字体大小和边距的增长而增长。

<div style="display: block; float: left; width: 100%;">
	<h1 style="float: left; text-align: left; margin: 0px;">
		<i class="fa fa-star-o"> </i> Information
	</h1>
	<div style="float: right; vertical-align: middle;">
		<a href="#" target="_self">Home</a> / Home / Home
	</div>
</div>

你可以在这里预览我的问题：

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

使用line-height 代表正确的div：

<div style="display: block; float: left; width: 100%;">
	<h1 style="float: left; text-align: left; margin: 0px;">
		<i class="fa fa-star-o"> </i> Information
	</h1>
	<div style="float: right; vertical-align: middle;line-height:40px;">
		<a href="#" target="_self">Home</a> / Home / Home
	</div>
</div>

【讨论】：

【解决方案2】：

我最喜欢的方法是对对齐的元素使用转换

<div style="display: block; float: left; width: 100%;position: relative;">
	<h1 style="float: left; text-align: left; margin: 0px;">
		<i class="fa fa-star-o"> </i> Information
	</h1>
	<div style="position: absolute; top: 50%;transform: translateY(-50%);right: 0;">
		<a href="#" target="_self">Home</a> / Home / Home
	</div>
</div>

【讨论】：

【解决方案3】：

我会尝试使用 display: table based vertical-alignment。或者，如果你使用现代浏览器，flexbox 就是你的上帝 :)

<div style="display: table;">
  <div style="display: table-cell; width:100%; ">
    <h1 style="margin: 0px;">
		<i class="fa fa-star-o"> </i> Information
	</h1>
  </div>
  <div style="display: table-cell; white-space:nowrap; vertical-align: middle;">
    <a href="#" target="_self">Home</a> / Home / Home
  </div>
</div>

【讨论】：

【解决方案4】：

改用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="">
	<div>
    <h1 style="text-align: left; margin: 0px;">
		<i class="fa fa-star-o"> </i> Information
	</h1>
    </div>
	<div>
		<a href="#" target="_self">Home</a> / Home / Home
	</div>
</div>

【讨论】：