使用CSS跨浏览器中心对齐方式

使用CSS水平和垂直方式对齐位置为relative的div的最简单方法是什么？ div的宽度和高度是未知的，即它应该适用于每个div维度以及所有主流浏览器。我的意思是中心对齐。使用CSS跨浏览器中心对齐方式

我以为要使用水平对齐方式：

margin-left: auto; 
margin-right: auto;

像我一样here。

这是一个很好的跨浏览器解决方案水平对齐？

我怎么能做垂直对齐？

来源

2010-05-29 Misha Moroshko

当你说对齐，它不清楚你想要对齐div。你的意思是中心的分区？ – 2010-05-29 14:23:32

你的意思是垂直对齐div中心 – Starx 2010-05-29 14:25:53

对不起，是的，我的意思是中心对齐。 – 2010-05-29 14:30:46

水平居中只有在元素的width已知时才可能，否则浏览器无法确定开始和结束的位置。

#content { 
    width: 300px; 
    margin: 0 auto; 
}

这是完美的横向浏览器兼容。

垂直居中只有在元件绝对定位且已知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？”经验。

来源

2010-05-29 14:47:26 BalusC

请注意，您必须在标准模式下运行IE才能正常工作（在Quirks模式下，必须在父元素上使用'text-align：center'来水平居中div）。 – 2010-05-29 14:51:17

古怪模式从来不是现代网页的一种选择，所以它不值得考虑。 – Rob 2010-05-29 15:05:31

@Rob：虽然我讨厌开始一场关于此事的火焰战争（没有人死于怪癖模式），但我曾经在Web应用中使用Quirks模式来使用[边框盒模型]（http：// www .quirksmode.org/css/box.html）。 – 2010-05-29 15:30:20

“垂直居中只有在元件绝对定位且具有已知高度时才可能。” - 这种说法并不完全正确。

您可以尝试和使用display:inline-block;及其可能性在其父项框中垂直对齐。此技术允许您在不知道其高度和宽度的情况下对齐元素，但它至少需要您了解父级的高度。

如果您的HTML是这个;

<div id="container"> 
    <div id="aligned-middle" class="inline-block">Middleman</div> 
    <div class="strut inline-block">&nbsp;</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 */ 
}

然后＃对齐，中间会#container的内部居中。这是这种技术的最简单的用法，但是熟悉这个技巧是很好的。

通过使用条件注释，标记为“/ * IE < 8 * /”的规则应放置在单独的样式表中。

您可以查看这里的这个工作的例子：http://jsfiddle.net/UXKcA/3/

编辑：（在IE6和ff3.6测试，但我用这个有很多这个特殊的代码片段，它是相当的跨浏览器，如果你需要。对于FF < 3的支持，您还需要.inline-block规则中添加display:-moz-inline-stack;display:inline-block;下。）

来源

2010-05-29 17:19:26

“如果宽度和高度真的是事先未知的，那么你就需要抓住的Javascript/jQuery的设置余裕和余裕的值，并与客户端将会看到div快速被在页面加载期间移动，这可能会导致“wtf？”体验。

你可以.hide() div时DOM准备就绪，等待页面加载，重新设置DIV margin-left和margin-top值，并.show()股利。

$(function(){ 
    $("#content").hide(); 
)}; 
$(window).bind("load", function() { 
    $("#content").getDimSetMargins(); 
    $("#content").show(); 
});

来源

2011-09-26 23:53:55 nickarmstronggr

不好的做法，但如果已经准备好，将它隐藏在CSS中，并且只在jq加载时显示它。 – Dementic 2012-03-08 19:22:48

入住这Demo jsFiddle

设置以下东西

HTML 对齐属性值中心
CSS 利润率左和保证金右属性值设置汽车

CSS

<style type="text/css"> 
    #setcenter{ 
      margin-left: auto; 
      margin-right: auto;  
      // margin: 0px auto; shorthand property 
    } 
</style>

HTML

<div align="center" id="setcenter"> 
    This is some text! 
</div>

来源

2014-03-03 12:40:50

使用CSS跨浏览器中心对齐方式

回答

相关问题