Bootstrap 对齐 col 内的元素答案

【问题标题】：Bootstrap align elements inside colBootstrap 对齐 col 内的元素
【发布时间】：2019-12-09 12:07:56
【问题描述】：

我需要帮助解决这个问题，我需要在 bootstrap4 的列中居中，请在下面找到我的代码：

@import '../../styles/global/_variables.sass' .concept-area background-image: url("../../../assets/images/conceptBG.jpg") height: 140px background-position: center background-repeat: no-repeat background-size: cover .title font-family: Raleway font-size: 36px font-weight: 300 font-style: italic font-stretch: normal line-height: 1.03 letter-spacing: 1.8px text-align: left color: $base-gold .btn-discover width: 263px height: 50px box-shadow: 20px 20px 60px 0 rgba(0,
0,
0,
0.4) background-color: $base-gold border-radius: 0 !important color: #ffffff line-height: 0.95 font-size: 20px font-family: Raleway

<section class="concept-area">
  <div class=" h-100 ">
    <div class="row h-100 justify-content-center align-items-center">
      <div class="col-md-6 concept-text ">
        <p class="title">Des chèques cadeaux pour <br> des soirées privilèges</p>
      </div>
      <div class="col-md-6 text-center">
        <button type="button" class="btn btn-discover">DECOUVRIR</button>
      </div>
    </div>
  </div>
</section>

按钮居中很好，但我不明白为什么带有“title”类的 p 标签不能居中！！

【问题讨论】：

.title 有 text-align: left; _ 尝试更改或删除它
你的container在哪里？
为什么不为像 h1、h2.. 这样的标题使用适当的标签？

标签： html css twitter-bootstrap sass

【解决方案1】：

<section class="concept-area">
    <div class="col-sm-10 offset-sm-1 text-center h-100 ">
    <div class="row h-100 justify-content-center align-items-center">
      <div class="col-md-6 concept-text">
        <p class="title">Des chèques cadeaux pour <br> des soirées privilèges</p>
      </div>
      <div class="col-md-6">
        <button type="button" class="btn btn-discover">DECOUVRIR</button>
      </div>
    </div>
  </div>
</section>

看看这是否能解决您的问题。如果您正在寻找标题和按钮是内联并居中，或者您希望标题和按钮位于新行并居中，我从您的问题中不明白。

【讨论】：