如何集中内容col-xs-4

Question

我有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>

如何中心div块 .block在父级.col-xs-4？

Answer 1

如果您想对齐Div .Block的内容，则可以使用此

.block {
  text-align:center;
}

Answer 2

您正在使用哪种版本的bootstrap？可能需要修改，但现在假设版本4。

Bootstrap网格应具有父级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">

Answer 3

添加以下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>

Answer 4

您是否尝试在Col类中添加text-center？或者，您可以尝试将justify-content-center类添加到行类。