mx-auto

bootstrap5.css

bootstrap5.css
.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

html bootstrap5 Sample

フロートを解除する(親要素範囲内でfloatを使う):clearfix


右フロート
  <!-- 親にclearfixすることで、その中だけでfloatを使うことで、他のレイアウト崩れを回避するために使う -->
  <!-- 重なっていない浮いているから背景色出る -->
  <!-- 幅50でmx-autoで赤色を指定している -->
  <div class="w-50 mx-auto bg-danger clearfix">
    <div class="float-end bg-success">右フロート</div>
  </div>

フロートを解除なし(重なっているので背景色がでない)


右フロート
  <div class="w-50 mx-auto bg-danger">
    <div class="float-end bg-success">右フロート</div>
  </div>

テキストが折り返さないように設定する:text-nowrap


途中で折り返しなしはtext-nowrapを追加 途中で折り返しても良い場合は何もなし
  <table class="w-50 mx-auto">
    <tr>
      <th class="text-nowrap">途中で折り返しなしはtext-nowrapを追加</th>
      <td>途中で折り返しても良い場合は何もなし</td>
    </tr>
  </table>

画像の中央寄せ:mx-autoとd-block


中央寄せ画像
  <!-- imgにclassを設定する -->
  <img src="https://via.placeholder.com/200x200" class="mx-auto d-block" alt="中央寄せ画像">