Mis*_*hko 25 html javascript css jquery alignment
使用CSS水平和垂直对齐div其位置的最简单方法是relative什么？它的宽度和高度div是未知的,即它应该适用于每个div维度和所有主要浏览器.我的意思是中心对齐.
我想使用以下方法进行水平对齐:
margin-left: auto;
margin-right: auto;
像我一样在这里.
这是一个很好的跨浏览器水平对齐解决方案吗？
我怎么能做垂直对齐？
Bal*_*usC 32
只有元素width已知时才能进行水平居中,否则浏览器无法确定开始和结束的位置.
#content {
width: 300px;
margin: 0 auto;
}
这是完全兼容的crossbrowser.
只有当元件绝对定位且已知时,才能实现垂直定心height.然而,绝对定位会破裂,margin: 0 auto;因此您需要采用不同的方法.您需要设置的top,并left以50%和margin-top和margin-left到负半其width和height分别.
这是一个copy'n'paste'n'runnable例子:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2935404</title>
</head>
<style>
#content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 1px solid #000;
}
</style>
<body>
<div id="content">
content
</div>
</body>
</html>
也就是说,垂直居中通常很少应用于现实世界.
如果预先知道宽度和高度是未知的,那么你需要抓住Javascript/jQuery来设置margin-left和margin-top值,并且客户端会在页面加载期间快速移动div这一事实,这可能会导致"wtf？ " 经验.
"只有在元件绝对定位且具有已知高度的情况下才能实现垂直定心." - 这句话并不完全正确.
您可以尝试使用display:inline-block;它,并可以在其父框中垂直对齐.此技术允许您在不知道其高度和宽度的情况下对齐元素,但它至少需要您知道父级的高度.
如果您的HTML是这样的话;
<div id="container">
<div id="aligned-middle" class="inline-block">Middleman</div>
<div class="strut inline-block"> </div>
</div>
你的CSS是:
#container {
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
}
#aligned-middle {
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
}
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut {
/* parent's height */
height:300px;
}
.inline-block {
display:inline-block;
*display:inline;/* for IE < 8 */
*zoom:1;/* for IE < 8 */
}
然后#aligned-middle将在#container中居中.这是这种技术最简单的用法,但它是一个很熟悉的好方法.
标有"/*for IE <8*/"的规则应通过使用条件注释放在单独的样式表中.
你可以在这里查看一个有效的例子:http://jsfiddle.net/UXKcA/3/
编辑:(这个特殊的代码片段在IE6和ff3.6测试,但我用这个有很多,它是相当的跨浏览器,如果你需要的FF <3的支持,您还需要补充.display:-moz-inline-stack;在display:inline-block;内部.inline-block规则.)