html - div 内の要素を水平方向にセンタリングする

Question

これを簡単にするために、幅が 100 ピクセルの div があり、その中にそれぞれ幅が 20 ピクセルの 3 つの div があるとします。20px を残して div の中心に揃えるにはどうすればよいですか。両側に隙間？

Answer 1

良い一日！これが私がそれを実装した方法です：

HTML

<div id="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

#container {
  width: 100px;
  height: 100px;
  border: 1px solid red; /** for viewing purposes **/
  text-align: center; /** center the divs **/
  font-size: 0; /** remove the unwanted space caused by display: inline-block in .child **/
}

#container .child {
  display: inline-block; /** set the divs side-by-side **/
  vertical-align: top;
  width: 20px;
  height: 100px;
  font-size: 12px; /** override font-size: 0 of #container, so that text will be visible again **/
  text-align: left; /** set text in the .child divs back to normal alignment **/
  border: 1px solid blue; /** for viewing purposes **/
  box-sizing: border-box;
}

これが役立つことを願っています。乾杯！:)