Bootstrap 4 - 對齊列表中的文本

我剛開始使用引導程序4，我無法將文本居中在列表組中。Bootstrap 4 - 對齊列表中的文本

在自舉3，以下工作完美：

.list-con { 
    text-align:center; 
}

然而，在自舉4。文本對齊僅適用於多行文本。

li { 
 
    text-align: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="list-con"> 
 
    <ul class="list-group test"> 
 
    <li class="list-group-item test-item"> 
 
     Title 
 
    </li> 
 
    <li class="list-group-item test-item"> 
 
     Title2 
 
    </li> 
 
    <li class="list-group-item test-item"> 
 
     Morbi id neque a eros mattis tristique at a dolor. Quisque sapien tortor, suscipit ut varius id, dictum eget tortor. Sed elit diam, tincidunt sed fringilla a, dignissim in augue. Curabitur elementum ante eget erat eleifend, a blandit odio accumsan. Nullam 
 
     mattis urna nec elit dapibus, vel suscipit nulla dictum. Etiam erat magna, dictum eget pharetra et 
 
    </li> 
 
    </ul> 
 
</div>

來源

2017-07-19 Sam.tuver

'證明，內容center'可能？ https://v4-alpha.getbootstrap.com/utilities/flexbox/ –

可以實現列表組居中文本與justify-content: center;，這

...定義了瀏覽器之間和周圍沿主軸線的內容項目如何分配空間他們的容器

See MDN for more信息。

li { 
 
    justify-content: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="list-con"> 
 
    <ul class="list-group test"> 
 
    <li class="list-group-item test-item"> 
 
     Title 
 
    </li> 
 
    <li class="list-group-item test-item"> 
 
     Title2 
 
    </li> 
 
    <li class="list-group-item test-item"> 
 
     Morbi id neque a eros mattis tristique at a dolor. Quisque sapien tortor, suscipit ut varius id, dictum eget tortor. Sed elit diam, tincidunt sed fringilla a, dignissim in augue. Curabitur elementum ante eget erat eleifend, a blandit odio accumsan. Nullam 
 
     mattis urna nec elit dapibus, vel suscipit nulla dictum. Etiam erat magna, dictum eget pharetra et 
 
    </li> 
 
    </ul> 
 
</div>

來源

2017-07-19 08:34:20 andreas

您可以使用專用的類此https://v4-alpha.getbootstrap.com/utilities/flexbox/

Flexbox的

迅速進行佈局，調整和網格列，導航，組件的大小，還有一套全面的響應式Flexbox實用程序。對於更復雜的實現，自定義CSS可能是必要的。

https://v4-alpha.getbootstrap.com/utilities/flexbox/#justify-content

對齊內容

使用證明內容上Flexbox的容器應用程序更改主軸線（x軸開始，柔性項的校準Y-軸如果彎曲方向：列）。從開始（瀏覽器默認），結束，中間，之間或周圍選擇。

li { 
 
    text-align: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="list-con"> 
 
    <ul class="list-group test d-flex"><!-- tell bootsrap it is a flex-box --> 
 
    <li class="list-group-item test-item d-flex justify-content-center"><!-- here flex class added --> 
 
     flex class added here 
 
    </li> 
 
    <li class="list-group-item test-item"> 
 
     Title2 
 
    </li> 
 
    <li class="list-group-item test-item"> 
 
     Morbi id neque a eros mattis tristique at a dolor. Quisque sapien tortor, suscipit ut varius id, dictum eget tortor. Sed elit diam, tincidunt sed fringilla a, dignissim in augue. Curabitur elementum ante eget erat eleifend, a blandit odio accumsan. Nullam 
 
     mattis urna nec elit dapibus, vel suscipit nulla dictum. Etiam erat magna, dictum eget pharetra et 
 
    </li> 
 
    </ul> 
 
</div>

來源

2017-07-19 08:34:53

Bootstrap 4 - 對齊列表中的文本

回答

相關問題