搜尋

首頁  >  問答  >  主體

javascript - 為何margin:auto auto 不能上下左右對齊?

一個html中只有一個p。

<p class="test">
</p>

css1:

.test{
    width:200px;
    height:200px;
    border:1px solid red;
    margin:0 auto;
    }

css1可以讓p.test左右居中。

css2:

.test{
    width:200px;
    height:200px;
    border:1px solid red;
    margin:auto auto;
    } 

为何css2不可以使p.test上下左右居中?? 
请不要回答如何使他p.test上下左右居中,请回答为何margin:auto auto;不能上下左右居中?? 
过去多啦不再A梦过去多啦不再A梦2831 天前1241

全部回覆(4)我來回復

  • 大家讲道理

    大家讲道理2017-06-24 09:44:38

    其他屬性的使用值必須滿足以下限制:

    'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含區塊的寬度

    如果 'margin-left' 和 'margin-right' 都是 'auto',那麼它們使用的值是相等的。這使元素相對於包含塊的邊緣水平居中。

    下面是關於高度的:

    如果 'margin-top' 或 'margin-bottom' 為 'auto',則它們的使用值為 0。如果 'height' 為 'auto',則高度取決於該元素是否有任何區塊級子元素以及是否它有填充或邊框:

    因為規格就是這麼規定的演算法,瀏覽器就是這樣實現的。

    • CSS規範

    回覆
    0
  • 阿神

    阿神2017-06-24 09:44:38

    這是個好問題,那我問你,當一行存在兩個元素的時候,你可以左右居中嗎?同理當你的上下都可能有元素存在的情況下你要瀏覽器怎麼去計算對應元素應該存在的位置?

    回覆
    0
  • 某草草

    某草草2017-06-24 09:44:38

    不能吧,上下對齊如果不用flex佈局,沒啥太好的辦法。 virtical–align也不太好用!

    回覆
    0
  • PHP中文网

    PHP中文网2017-06-24 09:44:38

    不能,如果想上下左右對居中的話,推薦使用flex佈局,其次是table,table-cell或定位

    回覆
    0
  • 取消回覆