【问题标题】:Vertical alignment in bootstrap 4bootstrap 4中的垂直对齐
【发布时间】:2017-09-04 21:39:27
【问题描述】:

我正在尝试在图像上放置一个中心文本。我使用mx-auto 将覆盖文本水平居中并使用align-middle 进行垂直对齐。但是垂直对齐不起作用。有人知道为什么吗?

  

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

      <div class="card ">
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
<div class="card-img-overlay d-flex">
  <div class="mx-auto">
<h4 class="card-title align-middle">Animal Farm</h4>
<h6 class="text align-middle">George Orwell</h6>
<p class="card-text align-middle">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
</div>
</div>
</div>

【问题讨论】:

    标签: css twitter-bootstrap bootstrap-4


    【解决方案1】:

    只需将my-auto 用于垂直中心...

      <div class="card">
            <img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
            <div class="card-img-overlay d-flex">
                <div class="my-auto mx-auto text-center">
                    <h4 class="card-title">Animal Farm</h4>
                    <h6 class="text">George Orwell</h6>
                    <p class="card-text">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
                </div>
            </div>
      </div>
    

    http://codeply.com/go/ZQM4ANFcXC

    align-middle 将适用于 display: tabledisplay: inline 元素。

    另见similar question

    【讨论】:

    • 有什么理由不使用m-auto 而不是my-auto mx-auto 吗?
    • 如果你想要水平和垂直中心使用m-auto。我两个都用了,因为问题只是关于垂直中心,我想区分my-auto的使用。
    【解决方案2】:

    您不需要.mx-auto。您可以只在父级上使用.justify-content-center.align-items-center.flex-columnhttps://v4-alpha.getbootstrap.com/utilities/flexbox/

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
    
    <div class="card ">
      <img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
      <div class="card-img-overlay d-flex justify-content-center align-items-center flex-column">
          <h4 class="card-title align-middle">Animal Farm</h4>
          <h6 class="text align-middle">George Orwell</h6>
          <p class="card-text align-middle">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
      </div>
    </div>

    【讨论】:

      【解决方案3】:

      用这段代码试试,在这里:

      <div class="card ">
      <img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
      <div class="card-img-overlay d-flex">
      
      <div class="mx-auto" style="margin-top: auto;margin-bottom: auto;">
      <h4 class="card-title">Animal Farm</h4>
      <h6 class="text">George Orwell</h6>
      <p class="card-text">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
      </div>
      
      </div>
      </div>
      

      基本上只是将style="margin-top: auto;margin-bottom: auto;" 添加到具有 mx-auto 类的 div 中。

      【讨论】:

        猜你喜欢
        • 2017-05-07
        • 2017-05-11
        • 2020-03-11
        • 2017-12-10
        • 1970-01-01
        • 1970-01-01
        • 2017-07-04
        相关资源
        最近更新 更多