關於保證金屬性和價值自動

CODE: 
*{ 
    margin:0px; 
    padding:0px; 
} 
body{ 
    font-family:sans-serif; 
    width:1024px; 
    height:700px; 
    border:1px solid green; 

    //margin:0 auto; 

    margin-left:auto; 
    margin-right:auto; 
    margin-top:auto; 
    margin-bottom:auto; 
}

1.i預期來自各方面的居中框，但框模型的頂部部分是在身體的開始，如果我明確地設置margin-top：20px，boxmodel向下移動，但爲什麼頂部不會像其他部分那樣自動對齊。關於保證金屬性和價值自動

2.我也沒得到什麼汽車價值「並」實現中心

保證金的情況下：0汽車; // 0是什麼單位？px，em或pt。

來源

2013-07-13 violet kiwi

Css中的垂直對齊是一個有趣而痛苦的話題。這stackoverflow queston是我見過關於爲什麼垂直對齊可以如此痛苦

至於你的第一個問題，則不能使用垂直邊距在報價說明如下對齊的原因最好簡明的解釋。

...文檔流和元素高度計算算法的性質使得無法使用邊距在其父代中垂直居中元素。每當垂直邊距值發生變化時，它將觸發父元素高度重新計算（迴流），這將會觸發原始元素的重新中心...使其成爲無限循環。

至於你的第二個問題，保證金自動通過計算相對於其父的寬度子容器的寬度達到水平居中。然後，它執行簡單的數學操作，在子容器的左側和右側添加均勻的邊距，從而實現水平居中。

至於第二質詢B部分，

margin: auto相同如下：

margin-top: auto; 
margin-bottom: auto; 
margin-right: auto; 
margin-left: auto;

其中作爲margin: 0 auto是等效於以下：

margin-top: 0; 
margin-bottom: 0; 
margin-right: auto; 
margin-left: auto;

實現垂直居中的解決方案

儘管存在一些限制，但您仍可以利用某些選項來實現垂直對齊。最簡單的是利用一張桌子。使用表格時，其中幾個優點之一是，使用vertical-align屬性的行爲與在表格內執行時的預期相同。所以，你可以這樣做以下：

<body> 
    <table style="width: 100%; height: 100%"> 
     <tr> 
       <td> 
        <div id="verticallyCenteredContent" style="vertical-align: middle"> 
         OMG it's vertically aligned 
        </div> 
       <td> 
     <tr> 
    <table> 
<body>

有我在這個jsfiddle證明兩種常用的方法。

演示了一些場景和有用的物品接近實現垂直居中 - Vertical Centering with Css

乾杯！

來源

2013-07-13 05:49:15

解釋得很好，謝謝！ –

首先，使用css水平居中「Div」。之後，使用JavaScript來居中垂直。見demo on jsfiddle HTML：

<div class="center">Div content</div>

CSS：

.center { 
    font-family:sans-serif; 
    width:300px; 
    height:300px; 
    border:1px solid green; 
    margin: 0 auto; 
    text-align:center; 
}

JS（JQuery的）：

$().ready(function() { 
    $(".center").css("margin-top", ($(window).height() - 300)/2); 
});

見demo on jsfiddle

來源

2013-07-13 05:57:35 JamesN

這裏是CSS margin問題多了一個資源。 http://techslate.net/looking-at-css-margins/

來源

2013-07-15 05:48:03 ajishkumar

關於保證金屬性和價值自動

回答

相關問題