如何将内容col xs-4居中？
如何将内容col xs-4居中？
提问于 2019-05-22 01:33:14
我有HTML代码块：
<div class="class-journal-mobile-navigation">
<div class="col-xs-4"><div class="block"></div></div>
<div class="col-xs-4"><div class="block"></div></div>
<div class="col-xs-4"><div class="block"></div></div>
</div>如何在父.col-xs-4内居中放置div块.block
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-05-22 01:37:39
添加以下CSS：
.col-xs-4{
text-align: center;
}
.block{
display: inline-block;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="class-journal-mobile-navigation">
<div class="col-xs-4">
<div class="block">A</div>
</div>
<div class="col-xs-4">
<div class="block">B</div>
</div>
<div class="col-xs-4">
<div class="block">C</div>
</div>
</div>
Stack Overflow用户
发布于 2019-05-22 01:41:14
如果您想要对齐div .block的内容，可以使用以下命令
.block {
text-align:center;
}Stack Overflow用户
发布于 2019-05-23 01:06:40
您使用的是哪个版本的Bootstrap？可能需要修改，但现在假设是版本4。
引导网格应该有父row类。
<div class="row class-journal-mobile-navigation">
<div class="col-xs-4">
<div class="block"></div>
</div>
<div class="col-xs-4">
<div class="block"></div>
</div>
<div class="col-xs-4">
<div class="block"></div>
</div>
</div>对于快速CSS，最好使其更具体于您定义的.class-journal-mobile-navigation，并将其作为.col-xs-4的子级。
.class-journal-mobile-navigation .col-xs-4 {
text-align: center;
}
.class-journal-mobile-navigation .col-xs-4 .block {
display: inline-block;
}这里有许多有用的CSS类可以使用。帮助定义专门用于XS断点的布局，而不需要额外的CSS。下面是其中一些类如何应用于您的示例的示例。
<div class="row class-journal-mobile-navigation">
<div class="col-xs-4 text-center text-sm-left">
<div class="d-inline-block d-sm-block"></div>
</div>
<div class="col-xs-4 text-center text-sm-left">
<div class="d-inline-block d-sm-block"></div>
</div>
<div class="col-xs-4 text-center text-sm-left">
<div class="d-inline-block d-sm-block"></div>
</div>
</div>Flex类是另一个选择！
<div class="col-xs-4 d-flex justify-content-center">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56243634
复制相关文章
相似问题
腾讯云开发者
