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 - 对齐列表中的文本

回答

相关问题