how to put <section> inline and center

I’m trying to put boxes in center and to keep them inline.

Here is what I tried:

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

solution

The <center> tag is deprecated. Don’t use it.

One approach to center the section element(s) would be to set their display to inline-block, remove float: left, and then add text-align: center to the parent container element. In doing so, the children elements are centered because they are inline-level and they respect the parent element’s text-align property.

.container {
  text-align: center;
}
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #0f0;
  margin: 10px;
}
<div class="container">
  <section class="box">BOX 1</section>
  <section class="box">BOX 2</section>
</div>

Alternatively, using flexboxes, you could set the parent container element’s display to flex, and then add justify-content: center in order to horizontally center the children flexbox items.

.container {
  display: flex;
  justify-content: center;
}
.box {
  text-align: center;
  width: 100px;
  height: 100px;
  background-color: #0f0;
  margin: 10px;
}
<div class="container">
  <section class="box">BOX 1</section>
  <section class="box">BOX 2</section>
</div>