如何將 Bootstrap 欄位中的內容置中？-css教學-PHP中文網

如何將 Bootstrap 欄位中的內容置中？

Patricia Arquette

發布： 2024-10-27 17:13:02

原創

497 人瀏覽過

How to Center Content Within Bootstrap Columns?

在 Bootstrap 欄位中居中內容

在 Bootstrap 中，可以透過多種方法實現在列中居中內容。

一個常見的方法是在列 div 中使用align=“center”屬性。例如：

<code class="html"><div class="row">
  <div class="col-xs-1" align="center">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div></code>

登入後複製

但是，HTML5 並不完全支援這種方法。相反，Bootstrap 3 提供了一個專用的文本中心類，可以應用於列：

<code class="html"><div class="row">
  <div class="col-xs-1 text-center">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div></code>

登入後複製

對於Bootstrap 4，flex 類提供了更現代、更高效的居中內容解決方案：

<code class="html"><div class="d-flex justify-content-center">
  <div>some content</div>
</div></code>

登入後複製

此方法預設將內容沿x 軸居中，除非將flex-direction 屬性設為沿y 軸居中的列。

以上是如何將 Bootstrap 欄位中的內容置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！