我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐,彼此相邻。其中一个图像需要在div中绝对定位。
要在所有常见浏览器上工作,需要什么样的CSS ?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐,彼此相邻。其中一个图像需要在div中绝对定位。
要在所有常见浏览器上工作,需要什么样的CSS ?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
当前回答
我的技巧是在div里面放一个表,一行一列,设置100%的宽度和高度,属性vertical-align:middle:
<div>
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table>
</div>
小提琴: http://jsfiddle.net/joan16v/sbqjnn9q/
其他回答
我们可以使用CSS函数计算来计算元素的大小,然后相应地定位子元素。
示例HTML:
<div class="box">
<span><a href="#">Some Text</a></span>
</div>
和CSS:
.box {
display: block;
background: #60D3E8;
position: relative;
width: 300px;
height: 200px;
text-align: center;
}
.box span {
font: bold 20px/20px 'source code pro', sans-serif;
position: absolute;
left: 0;
right: 0;
top: calc(50% - 10px);
}
a {
color: white;
text-decoration: none;
}
演示创建在这里:https://jsfiddle.net/xnjq1t22/
这个解决方案工作良好的响应div高度和宽度以及。
注意:没有测试calc函数与旧浏览器的兼容性。
几乎所有的方法都需要指定高度,但通常我们没有任何高度。
这里有一个css3的三行技巧,它不需要知道高度。
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
甚至在IE9中也支持它。
与其供应商前缀:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
来源:垂直对齐任何只需3行CSS
<div id="header" style="display: table-cell; vertical-align:middle;">
...
或CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
浏览器覆盖
使用这个公式,它将永远没有裂缝:
#outer {height: 400px; overflow: hidden; position: relative;} #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%;} /* For explorer only*/ #middle[id] {display: table-cell; vertical-align: middle; width: 100%;} #inner {position: relative; top: -50%} /* For explorer only */ /* Optional: #inner[id] {position: static;} */ <div id="outer"> <div id="middle"> <div id="inner"> any text any height any content, for example generated from DB everything is vertically centered </div> </div> </div>
我已经使用以下解决方案(没有定位和线高)一年多了,它适用于Internet Explorer 7和Internet Explorer 8。
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>