CSSでDIVを横並びにする色々な方法

htmlの「div」などブロック要素を横に並べる場合、多くのケースで「float:left」が利用されます。「float:left」は「横並び＋中央寄せ」が出来ないなど使い勝手はよくありません。
FlexBox「display:flex」やインラインブロック「display:inline-block」を使用すると中央寄せなども可能となります。

使用するhtmlは同じですが、「flex」「float」「inline-block」で生成されるCSSは異なりますので、いろいろお試しください。

<div class="box" id="makeImg">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

 /* --- 外枠の定義 ---------------------------------------------*/
.box {
  margin         : auto;                 /* サンプル用 中央寄せ */
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #fff;                 /* BOXの背景色         */
  border         : 1px solid #666;       /* 枠線の指定          */
  width          : 280px;                /* BOXの幅             */
  max-height     : 210px;                /* BOXの高さ           */
  animation: boxAnime 10s linear infinite alternate;
 /* ▼ FlexBoxの定義 */
  display        : flex;                 /* FlexBox定義         */
  flex-wrap      : wrap;                 /* 折り返し定義        */
}
 /* --- サンプル確認用の親枠幅アニメーション ------------------ */
 /*     (BOXの並びには関係ありません)                           */
@keyframes boxAnime{
   0% { width : 280px }
  40% { width : 280px }
  60% { width : 150px }
 100% { width : 150px }
}
 /* --- 個別のBOXの定義 --------------------------------------- */
.box div {
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #B0C4DE;              /* BOXの背景色         */
  border         : 2px solid #35557f;    /* 枠線の指定          */
  width          : 60px;                 /* サンプルBOXの幅     */
  height         : 60px;                 /* サンプルBOXの幅     */
  margin         : 2px;                  /* サンプルBOXの間     */
 /* ▼ FlexBoxの各ボックス均等自動幅 */
  flex-grow      : 1;                    /* 各BOXを均等に割当て */
}

flexboxについては、以下をご確認ください。
flexboxの機能一覧

DIV内の文字縦位置は、以下をご確認ください。
ブロック要素で縦中央揃えなどの文字位置指定するCSS