Question

我正在开展Free code camp项目，但我遇到了麻烦。我无法将图像下方的段落文本放在中心位置。我有设置为网格4。

<div class="container">
  <div class="row">
    <div class="jumbotron">
      <div class="col-xs-12">
        <h1 class="text-center text-uppercase">Bernie Sanders</h1>
        <em><h2 class="text-center">"The man who stands for the people"</h2></em>
        <img id="bernie" src="https://imgur.com/iw13OaU.jpg" alt="Bernie Sanders">
        <div class="col-xs-4 col-md-4">
          <h3 class="text-center" id="timeline">A timeline of Bernie Sanders Accomplishments</h3>
          <ul class="text-justify small" id="list">
          ...

https://codepen.io/thehiddencheese/pen/WMWJeW

Answer 1

首先将z打包到grid 4并使用引导 [Flex Utilities] .row类到该行

.justify-content-center

另一种解决方案是使用 [offset] 类，如

<div class="row justify-content-center">
  <div class="col-sm-4"></div>
</div>

Answer 2

您可以使用text-align: center作为div <div class="col-xs-4 col-md-4">，然后段落文字将与图片下方的页面中心对齐。

但是，它看起来很奇怪，子弹点和文字对齐到中心。如果你将它与中心对齐，我建议不用子弹：）。

以下是您可以使用的div标签。

<div class="col-xs-4 col-md-4" style=" text-align:  center;">

Bootstrap网格不居中？我做错了什么

2 个答案: