使用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跨瀏覽器中心對齊方式

回答

相關問題