Question

为什么这段代码不能将所有三个元素都放在外部div中？

＆＃13;

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

＆＃13;

<div class="center">
  <h1 class="center">Headline</h1>

  <div class="center"><span>Some text</span></div>

  <form class="center">
    <button>Button</button>
  </form>
</div>

＆＃13;

如何在不指定绝对值的情况下执行此操作？为什么用HTML margin-left: auto;和margin-right: auto;这样的黑客来区分HTML中的div是如此困难？

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%;
}

添加text-align：center也会对齐文本：

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

＆＃13;

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

＆＃13;

<div class="center">
  <!-- container -->
  <h1 class="center">Headline</h1>

  <div class="center">Some text</div>

  <form class="center">
    <button>Button</button>
  </form>
</div>

＆＃13;

Answer 3

Here就是一个例子，这就是你要找的东西吗？

Here是中心元素的好指南

我认为你应该将元素分开，而不是尝试使用一个适合所有类的类，特别是当你想引用div和文本时，它可能会随着你扩展项目而变得更脏。但是，上面的示例使用了您的代码，因为您似乎想要为所有项使用相同的类。我使用display: block以防元素不是块项。

以上是项目的中心。

请记住

CSS

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

Answer 4

你可以使用text-align来集中这样的东西： <h1 style="text-align:center"> Sample Heading</h1>

Answer 5

首先，您可以使用<center>元素将其内容与中心对齐。

不幸的是，到目前为止，CSS无法完全重现<center>布局管理器。

＆＃13;

<center>
  <!-- container -->
  <h1 class="center">Headline</h1>

  <div class="center">Some text</div>

  <form class="center">
    <button>Button</button>
  </form>
</center>

＆＃13;

更新：技术上{+ 1}}在HTML5中已弃用，但适用于所有浏览器。并且一直有效，直到CSS没有匹配功能。

但你可能会对此感到满意：

＆＃13;

<center>

＆＃13;

.center {
  text-align:center;
}

＆＃13;

Answer 6

当使用属性为auto的边距时，您需要输入固定值（非百分比）作为宽度。

例如，如果您将百分比更改为px，cm，in或em值，则代码将起作用。

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

https://jsfiddle.net/s1napggb/

但是，为了使具有浮动值的元素居中，需要使用flexbox，CSS媒体查询或一些Javascript。

为什么在HTML中居中这么难？

6 个答案: