为什么在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>