如何在Bootstrap中将这些图像居中？

Question

嘿有stackoverflow

我正在尝试将这些图像居中。我尝试了有关引导程序中垂直居中的所有发现。

http://jsfiddle.net/tLd85urn/41/

在这里您可以看到我的源代码。如果在CSS样式表中删除“ div”和“ html”上的行（高度：100％；），则图像似乎居中，但整个页面都堆叠在一起。如何使这些图像居中，并保持“全屏”布局？

html,
body {
  height: 100%;
  /* If I remove this line, it works, but its no more fullscreen */
  width: 100%;
  margin: 0;
}

div {
  height: 100%;
  /* If I remove this line, it works, but its no more fullscreen */
  /*width: 100%; */
  margin: 0;
}

.header {
  height: 10% !important;
}

.content {
  height: 80% !important;
}

.footer {
  height: 10% !important;
}

<div class="container-fluid">
  <div class="row header text-center align-items-center align-middle">
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-6 col-6" style="background-color:lavenderblush;">.col-lg-8</div>
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
  </div>
  <div class="row content text-center align-items-center align-middle">
    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1" style="background-color:lavender;">.col-lg-1</div>
    <div class="align-items-center align-middle col-xl-10 col-lg-10 col-md-10 col-sm-10 col-10" style="background-color:blue;">.col-lg-10<img src="test2.png" class="align-items-center align-middle img-fluid rounded mx-auto" alt="Responsive image"><img src="test2.png" class="img-fluid mx-auto" alt="Responsive image"><img src="test2.png" class="img-fluid mx-auto" alt="Responsive image"></div>
    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1" style="background-color:lavender;">.col-lg-1</div>
  </div>
  <div class="row footer text-center">
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-6 col-6" style="background-color:lavenderblush;">.col-lg-8</div>
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
  </div>
</div>

最后应该看起来像这样：

感谢您的帮助和问候，

蒂恩

Answer 1

<div class="container-fluid" style=background-color:lavender>
  <div class="row text-center">
    <div class="col">
      image1
    </div>
    <div class="col">
    image2
    </div>
    <div class="col">
    image3
    </div>
  </div>
</div>

Hey are u seeing something like this ?? this is what i came appropriate for your query

Answer 2

重要的是要了解Bootstrap的网格系统如何工作。您需要在一个断点上保持清晰，之后才能将内容堆叠在另一个断点之下。这是对您的代码的修改，可以帮助您更好地理解：

Bootstrap类（col-md-4，lg-8等）将自动帮助您调整大小，以使图像居中，并使用以下CSS规则：

CSS

img{
 height: auto;
 width: 100%;
 }

这将确保您的图像占据div的整个宽度。检查小提琴中的完整代码。

这是更新后的小提琴中的a link。

Answer 3

将d-flex justify-content-center添加到具有3张图片的容器中

html,
body {
  height: 100%;
  width: 100%;
  /* If I remove this line, it works, but its no more fullscreen */
  margin: 0;
}

div {
  height: 100%;
  /*width: 100%; */
  margin: 0;
}

.header {
  height: 10% !important;
}

.content {
  height: 80% !important;
}

.footer {
  height: 10% !important;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row header text-center align-items-center align-middle">
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-6 col-6" style="background-color:lavenderblush;">.col-lg-8</div>
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
  </div>
  <div class="row content text-center align-items-center align-middle">
    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1" style="background-color:lavender;">.col-lg-1</div>
    <div class="align-items-center align-middle col-xl-10 col-lg-10 col-md-10 col-sm-10 col-10 d-flex justify-content-center" style="background-color:blue;">.col-lg-10<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1644a81b938%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1644a81b938%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.09375%22%20y%3D%22104.6546875%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
        class="align-items-center align-middle img-fluid rounded mx-auto" alt="Responsive image"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1644a81b938%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1644a81b938%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.09375%22%20y%3D%22104.6546875%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
        class="img-fluid mx-auto" alt="Responsive image"><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1644a81b938%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1644a81b938%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.09375%22%20y%3D%22104.6546875%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
        class="img-fluid mx-auto" alt="Responsive image"></div>
    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1" style="background-color:lavender;">.col-lg-1</div>
  </div>
  <div class="row footer text-center">
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2</div>
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-6 col-6" style="background-color:lavenderblush;">.col-lg-8</div>
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3" style="background-color:lavender;">.col-lg-2<img src="test3.png" class="img-fluid rounded mx-auto" alt="Responsive image"></div>
  </div>
</div>