我有一个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>
当前回答
默认情况下,h1是一个块元素,将在第一个img之后的行上呈现,并将导致第二个img出现在块之后的行上。
为了阻止这种情况发生,你可以将h1设置为内联流行为:
#header > h1 { display: inline; }
至于绝对定位img在div中,你需要设置包含div的“已知大小”,这样才能正常工作。在我的经验,你还需要改变位置属性从默认位置:相对工作为我:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
如果你能让它工作,你可能想尝试逐步从div.header中删除高度、宽度、位置属性,以获得获得你想要的效果所需的最小属性。
更新:
下面是一个在Firefox 3上运行的完整示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Example of vertical positioning inside a div</title> <style type="text/css"> #header > h1 { display: inline; } #header { border: solid 1px red; position: relative; } #img-for-abs-positioning { position: absolute; bottom: -1em; right: 2em; } </style> </head> <body> <div id="header"> <img src="#" alt="Image 1" width="40" height="40" /> <h1>Header</h1> <img src="#" alt="Image 2" width="40" height="40" id="img-for-abs-positioning" /> </div> </body> </html>
其他回答
在父div中创建中央子div的三种方法
绝对定位法 Flexbox方法 变换/翻译方法
Demo
/* Absolute Positioning Method */ .parent1 { background: darkcyan; width: 200px; height: 200px; position: relative; } .child1 { background: white; height: 30px; width: 30px; position: absolute; top: 50%; left: 50%; margin: -15px; } /* Flexbox Method */ .parent2 { display: flex; justify-content: center; align-items: center; background: darkcyan; height: 200px; width: 200px; } .child2 { background: white; height: 30px; width: 30px; } /* Transform/Translate Method */ .parent3 { position: relative; height: 200px; width: 200px; background: darkcyan; } .child3 { background: white; height: 30px; width: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <div class="parent1"> <div class="child1"></div> </div> <hr /> <div class="parent2"> <div class="child2"></div> </div> <hr /> <div class="parent3"> <div class="child3"></div> </div>
对我来说,它是这样工作的:
<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
<a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>
“a”元素转换为按钮,使用Bootstrap类,它现在垂直居中在一个外部的“div”。
<div id="header" style="display: table-cell; vertical-align:middle;">
...
或CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
浏览器覆盖
默认情况下,h1是一个块元素,将在第一个img之后的行上呈现,并将导致第二个img出现在块之后的行上。
为了阻止这种情况发生,你可以将h1设置为内联流行为:
#header > h1 { display: inline; }
至于绝对定位img在div中,你需要设置包含div的“已知大小”,这样才能正常工作。在我的经验,你还需要改变位置属性从默认位置:相对工作为我:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
如果你能让它工作,你可能想尝试逐步从div.header中删除高度、宽度、位置属性,以获得获得你想要的效果所需的最小属性。
更新:
下面是一个在Firefox 3上运行的完整示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Example of vertical positioning inside a div</title> <style type="text/css"> #header > h1 { display: inline; } #header { border: solid 1px red; position: relative; } #img-for-abs-positioning { position: absolute; bottom: -1em; right: 2em; } </style> </head> <body> <div id="header"> <img src="#" alt="Image 1" width="40" height="40" /> <h1>Header</h1> <img src="#" alt="Image 2" width="40" height="40" id="img-for-abs-positioning" /> </div> </body> </html>
几乎所有的方法都需要指定高度,但通常我们没有任何高度。
这里有一个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