首页 文章

Bootstrap 4 - 在flexbox子项上证明内容中心（覆盖flex父容器）

提问于
浏览 次
2

使用Bootstrap 4，我试图将一个img集中在主div的中间位置 . 但是，它不是中心 .

怎么样：
enter image description here

<!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时的样子（使用齿轮的背景颜色来区分）
enter image description here

在主容器 - 流体中应用d-flex之后（因为我需要对齐并证明主 Headers 和按钮居中），由于主容器中的d-flex，齿轮图标图像位于左角 .
enter image description here
我如何从它的主容器流体中使这个元素d块重写，以便我可以在div的bootom中间移动它？这可以通过Bootstrap类来实现吗？

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

html css twitter-bootstrap flexbox

3 回答

  • 1

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

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

    NOTE : 下面的代码片段是 Button 标签的示例 . 在您的情况下，将其更改为img . 现在我在下面的示例中也包含了 img Tag

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

    <img class="gear" src="http://www.clker.com/cliparts/2/5/7/f/1297719143988960365gear_red.png" style="width:50px;height:50px;"/>
    回复于
  • 0

    您可以通过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>
    回复于
  • 1

    你需要在 <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>
    回复于

相关问题