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

Question

我正在创建带有面包屑的pagetitle。现在我想垂直对齐te面包屑。 div随着字体大小和边距的增长而没有静态高度。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您可以在此处查看我的问题预览：

Answer 1

改为使用float - display: inline-block;

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用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>

Answer 3

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;