爲什麼在HTML中居中很難？

Question

爲什麼這段代碼不是將所有三個元素都集中在外部div中？

.center 
 
{ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 70%; 
 
}

<div class="center"> 
 
    <h1 class="center">Headline</h1> 
 

 
    <div class="center"><span>Some text</span></div> 
 

 
    <form class="center"> 
 
    <button>Button</button> 
 
    </form> 
 
</div>

我怎麼能做到這一點，沒有指定絕對值？ 爲什麼如此難以將HTML中的div與margin-left: auto;和margin-right: auto;這樣的黑客對中？

Answer 1

只需添加text-align: center

這裏是一個例子 https://jsfiddle.net/txtz8duL/

.center { 
    margin-left: auto; 
    margin-right: auto; 
    width: 70%; 
    text-align: center; 
} 

這裏也有更多的變化： https://css-tricks.com/centering-css-complete-guide/

Answer 2

要居中對齊文本或內聯元件，你只需要使用text-align: center;

自動餘量被設置爲對準用於與內聯塊或塊級元素一些固定的寬度元件。

所以，你的情況下中心的div元素，但沒有文字：

.center { 
    margin-left: auto; 
    margin-right: auto; 
    width: 70%; 
} 

添加文本對齊：中心將對齊文本太：

.center { 
    margin-left: auto; 
    margin-right: auto; 
    width: 70%; 
    text-align: center; 
} 

.center { 
 
margin-left: auto; 
 
margin-right: auto; 
 
width: 70%; 
 
text-align: center; 
 
}

<div class="center"> 
 
    <!-- container --> 
 
    <h1 class="center">Headline</h1> 
 

 
    <div class="center">Some text</div> 
 

 
    <form class="center"> 
 
    <button>Button</button> 
 
    </form> 
 
</div>

Answer 3

首先，你可以使用<center>元素以其內容爲中心。

不幸的是，CSS目前還沒有辦法完全複製<center>佈局管理器。

<center> 
 
    <!-- container --> 
 
    <h1 class="center">Headline</h1> 
 

 
    <div class="center">Some text</div> 
 

 
    <form class="center"> 
 
    <button>Button</button> 
 
    </form> 
 
</center>

更新：技術上<center>被棄用HTML5，但在所有的瀏覽器上運行。並將工作，直到CSS不會有匹配的功能。

但你可能會爲此而感到滿意：

.center { 
 
    text-align:center; 
 
}

<div class="center"> 
 
    <!-- container --> 
 
    <h1 class="center">Headline</h1> 
 

 
    <div class="center">Some text</div> 
 

 
    <form class="center"> 
 
    <button>Button</button> 
 
    </form> 
 
</div>

Answer 4

當使用自動的，你需要養活一個固定值（不是百分比）爲寬度屬性的利潤率。

例如，如果將百分比更改爲px，cm，in或em值，您的代碼就可以工作。

 .center 
     { 
      margin-left: auto; 
      margin-right: auto; 
      width: 70px; 
     } 

https://jsfiddle.net/s1napggb/

但是爲了與浮動值居中元素需要Flexbox的，CSS媒體查詢或一些JavaScript。

Answer 5

Here是一個例子，這是你在找什麼？

Here爲中心元素

我想你應該分開的元素，而不是試圖用一個尺寸適合所有階層，特別是當你要引用的div和文本很好的指導作用，它可能會您在擴大項目規模時會變得更骯髒但是，上面的例子使用你的代碼，因爲你似乎想爲所有的項目使用相同的類。如果元素不是塊項目，我使用display: block。

以上爲中心項目。

記住

CSS

.center { 
    display: block; 
    width: 70%; 
    text-align: center; 
    margin: 0 auto; 
} 

Answer 6

可以使用文本對齊到中心的任何這樣的事情： <h1 style="text-align:center"> Sample Heading</h1>