Bootstrap 4 - 在 flexbox 子项上对齐内容中心（覆盖 flex 父容器）答案

【问题标题】：Bootstrap 4 - justify content center on flexbox child (override flex parent container)Bootstrap 4 - 在 flexbox 子项上对齐内容中心（覆盖 flex 父容器）
【发布时间】：2018-09-20 19:49:01
【问题描述】：

使用 Bootstrap 4，我试图将 img 居中在主 div 的底部中间。但是，它没有居中。

应该如何：

<!doctype html>
          <html lang="en">
            <head>
              <title>Hello, world!</title>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

              <!-- Bootstrap CSS -->
              <link rel="stylesheet" href="css/bootstrap.min.css">


               <style>

                 section.masthead2{
                    background-color:orange;
                    background-repeat: no-repeat;
                    background-attachment: scroll;
                    background-position: center center;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                    height:80vh;
                  }
                  .gear {
                    height: 50px;
                  }
                  .botonhome{
                    background-color:#eb6626;
                    color: #ffffff;
                    padding-left:2em;
                    padding-right:2em;
                    font-family:'Josefin Sans', sans-serif;
                    font-weight:500;
                    border-radius:0.5em;
                    font-size:1.2em;
                  }
               </style>

            </head>
            <body>
              <section class="container-fluid masthead2  d-flex align-items-center justify-content-center">
                <div class="row">
                    <div class="col-12 d-flex justify-content-center">
                        <h1 class="textoprincipal ">Lorem Ipsum is simply dummy text of the printing</h1>
                    </div>
                    <div class="col-12 d-flex justify-content-center">
                      <a class="btn botonhome mr-3" routerLink="/backoffice/job" routerLinkActive="active" role="button">Testing1</a>
                      <a class="btn  botonhome" routerLink="/backoffice/jobs" routerLinkActive="active" role="button">Testing2</a>
                    </div>         
                </div>
                <div class="row d-flex align-self-end ">
                <div class="col-12">
                <img class="gear text-center" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Cog%2C_Web_Fundamentals.svg">
                </div>
                </div>
            </section>
              <!-- Optional JavaScript -->
              <!-- jQuery first, then Popper.js, then Bootstrap JS -->
              <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
              <script src="js/bootstrap.min.js"></script>
              <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
            </body>
          </html>

由于主容器流体具有 d-flex，因此两个后续 div 行都水平并排放置。下面是在主容器流体中没有 d-flex 的情况（使用背景颜色来区分齿轮）

在主容器流体中应用 d-flex 后（因为我需要对齐并对齐主标题和按钮居中），由于主容器中的 d-flex，齿轮图标图像位于左角。我将如何从它的主容器流体中制作这个元素 d-block 覆盖，以便我可以将它移动到 div 的 bootom 中间？这可以通过 Bootstrap 类来实现吗？

我不能制作两个主要的容器流体，因为背景将是一个图像。

【问题讨论】：

你能添加你的css吗
分享你的css代码，方便我们查看。
在你想要的img标签对应的css文件中添加'transform'属性
我已经用 CSS 更新了代码，这样更容易理解。这可以通过引导类来实现吗？

标签： html css twitter-bootstrap flexbox

【解决方案1】：

您可以通过 bootstrap 3 实现此目的

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

使用class="text-center"

<!doctype html>
          <html lang="en">
            <head>
              <title>Hello, world!</title>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

              <!-- Bootstrap CSS -->
              <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


               <style>

                 section.masthead2{
                    background-color:orange;
                    background-repeat: no-repeat;
                    background-attachment: scroll;
                    background-position: center center;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                    height:100vh;
                  }
                  .gear {
                    height: 50px;
                  }
                  .botonhome{
                    background-color:#eb6626;
                    color: #ffffff;
                    padding-left:2em;
                    padding-right:2em;
                    font-family:'Josefin Sans', sans-serif;
                    font-weight:500;
                    border-radius:0.5em;
                    font-size:1.2em;
                  }
               </style>

            </head>
            <body>
              <section class="container-fluid masthead2  d-flex align-items-center justify-content-center">
                <div class="row">
                    <div class="col-12 d-flex text-center">
                        <h1 class="textoprincipal ">Lorem Ipsum is simply dummy text of the printing</h1>
                    </div>
                    <div class="col-12 d-flex text-center">
                      <a class="btn botonhome mr-3" routerLink="/backoffice/job" routerLinkActive="active" role="button">Testing1</a>
                      <a class="btn  botonhome" routerLink="/backoffice/jobs" routerLinkActive="active" role="button">Testing2</a>
                    </div>         
                </div>
                <div class="row d-flex align-self-end ">
                <div class="col-12 text-center">
                <img class="gear text-center" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Cog%2C_Web_Fundamentals.svg">
                </div>
                </div>
            </section>
              <!-- Optional JavaScript -->
              <!-- jQuery first, then Popper.js, then Bootstrap JS -->
              <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
              <script src="js/bootstrap.min.js"></script>
              <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
            </body>
          </html>

【讨论】：

我不知道 bootstrap 4

【解决方案2】：

现在我也用img 标签发布了答案...请检查...

我已经发布了答案，但您想将其更改为与img 标记中给出的课程相对应的课程。

注意： 下面的代码 sn-p 是 Buttontag 的示例。在您的情况下，将其更改为 img。现在我在下面的例子中也包含了img标签

 .gear {
         height: 50px;
         position:absolute;
         margin-left:50%;
         margin-right:50%;
         transform: translateX(-50%);
       }

&lt;img class="gear" src="http://www.clker.com/cliparts/2/5/7/f/1297719143988960365gear_red.png" style="width:50px;height:50px;"/&gt;

【讨论】：

我已经为您的问题发布了答案...我认为这将帮助您解决问题...请检查并更新我...如果对您有帮助，请接受并投票...谢谢...祝你好运！！！:)
嗨，我用 CSS 更新了我的帖子以进行澄清，因为我无法在我的代码中应用你的答案。这不能通过引导程序实现吗？
我已经更新了我的答案...复制.gear类的CSS代码到你的代码中看看。

【解决方案3】：

您需要将图像包装在<div> 中并给它text-align:center

.imgcenter{
	text-align: center;
}

<section class="container-fluid d-flex align-items-center">
        <div class="row d-flex justify-content-center" style="text-align: center;">
          <div class="col-12">
              <h1 class="d-flex justify-content-center">Lorem Ipsum is simply dummy text of the printing</h1>
       </div>
      <div class="col-12 d-flex justify-content-center">
        <a class="btn mr-3" routerLink="/backoffice/job" 
  routerLinkActive="active" role="button">Testing1</a>
        <a class="btn  botonhome" routerLink="/backoffice/jobs" 
      routerLinkActive="active" role="button">Testing2</a>
       </div>
      </div>
      <div class="imgcenter">
        <img class="d-flex align-self-end justify-content-center" src="http://www.clker.com/cliparts/2/5/7/f/1297719143988960365gear_red.png" width= '50'>
      </div>
    </section>

【讨论】：

我试过了，但没有用。我已经用 CSS 更新了我的帖子。你认为这可以通过 Bootstrap 实现吗？
您可以通过 bootstrap3 来实现...查看我的其他答案。