如何将<section>放入内联和中心

Question

我试图将盒子放在中心并让它们保持内联。

以下是我的尝试：

HTML：

<center>
  <section class="box">BOX 1</section>
  <section class="box">BOX 2</section>
</center>

CSS：

.box {
  float: left;
  text-align: center;
  width: 100px;
  height: 100px;
  background: green;
  margin: 10px;
}

Answer 1

<center>代码is deprecated。不要使用它。

将section元素置于中心位置的一种方法是将display设置为inline-block，删除float: left，然后将text-align: center添加到text-align父容器元素。在这样做时，子元素是居中的，因为它们是内联级别的，并且它们尊重父元素的.container { text-align: center; } .box { display: inline-block; width: 100px; height: 100px; background-color: #0f0; margin: 10px; }属性。

＆＃13;

＆＃13;

<div class="container">
  <section class="box">BOX 1</section>
  <section class="box">BOX 2</section>
</div>

＆＃13;

.container {
  display: flex;
  justify-content: center;
}
.box {
  text-align: center;
  width: 100px;
  height: 100px;
  background-color: #0f0;
  margin: 10px;
}

＆＃13;

＆＃13;

＆＃13;

或者，使用flexboxes，您可以设置父容器元素display to flex，然后添加justify-content: center以便水平居中子项弹性框项目。

＆＃13;

＆＃13;

<div class="container">
  <section class="box">BOX 1</section>
  <section class="box">BOX 2</section>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;