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

將內容在 Bootstrap 欄位中居中

您在將內容在 Bootstrap 欄位中居中時遇到困難。您提供的 HTML 包括以下內容：

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

解決方案：

問題在於「center-block」類別的使用。目前版本的 Bootstrap 不再支援此類。相反，您應該使用以下方法之一：

Bootstrap 3 之前：

使用「align」屬性：

<code class="html"><div class="col-xs-1" align="center">
<p><strong></strong></p>
<p></p>
<pre class="brush:php;toolbar:false"><code class="html"><div class="col-xs-1 text-center">
<p><strong></strong></p>
<p></p>
<pre class="brush:php;toolbar:false"><code class="html"><div class="d-flex justify-content-center">
   <div>some content</div>
</div></code>

引導程式3 與4：

使用「文字中心」類別：引導程式4：使用彈性類別：注意： Bootstrap 4 預設水平對齊內容。對於垂直對齊，請在父元素上使用“flex-direction：column”。