Question

有没有办法只使用父包装元素来集中一些HTML？父包装器元素无法引用width的{{1}}。我能做到的唯一方法是使用innerHTML标记，但我们知道<center>已过时。例如，<center>这个：

center

这样：

<div style="width:100px;height:100px;background-color:#ff0000;"></div>

这样：

<div style="width:800px;height:100px;background-color:#ff0000;"></div>

或者这个：

<p>a little text here</p>

我可以简单地用<p style="width:400px;">a lot of text here fjskdfj sldjf slkdfj skldjf ksdjf kdsfj ksdjf skdfj ksdjf ksdjf ksdjf ksdjf ksdjf skdjf ksdjf skdfj skdfj ksdjf skdjf ksdjf ksdfj skdfj skdfj skdfj</p>包裹它们并且它有效。但还有其他办法吗？

Answer 1

以 css

为中心

html code:

<div class="parent">
  <div class="center">
      <p>A lot of text here</p>
  </div>
</div>

css代码：

.parent {
   width:800px;
}

.parent .center {
    width:400px;
    margin: 0 auto;
}

并且<div>与center类将在中心对齐。

Answer 2

为父定义text-align属性，如下所示：text-align: center;

Answer 3

在text-align: center元素上添加parent。

如何仅使用父元素水平居中HTML？

3 个答案: