在 Bootstrap Grid 中垂直和水平居中图像

Posted 2023-03-05

【中文标题】在 Bootstrap Grid 中垂直和水平居中图像

【英文标题】：Center Image Vertically and Horizontally in Bootstrap Grid

【发布时间】：2019-01-13 03:01:03

【问题描述】：

我无法确定如何将图像垂直和水平居中。基本上我有两行图像，宽度均为 150，但高度各不相同。

CSS

.image-center 
  display: inline-block;
  vertical-align: middle;
  position: relative;

html

<div class="row">
        <div class="col">
            <img class="center-block image-center"  src="imagery/1.png"/>
        </div>
        <div class="col">
            <img class="center-block image-center"  src="imagery/2.png"/>
        </div>            <div class="col">
            <img class="center-block image-center"  src="imagery/3.png"/>
        </div>            <div class="col">
            <img class="center-block image-center"  src="imagery/4.png"/>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <img class="center-block"  src="imagery/5.png"/>
        </div>            <div class="col">
            <img class="center-block"  src="imagery/6.png"/>
        </div>            <div class="col">
            <img class="center-block"  src="imagery/7.png"/>
        </div>            <div class="col">
            <img class="center-block"  src="imagery/8.png"/>
        </div>
    </div>

【问题讨论】：

能否请您添加更多的 CSS 代码，因为您有一个您没有发布的其他类（中心块）并且可能是同时拥有这两个类的问题。你也可以张贴结果的照片吗？

【参考方案1】：

此 CSS 将响应任何设备。它将水平和垂直居中。

.col 
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

【讨论】：

这一定是正确答案

【参考方案2】：

不知道 bootstrap 但如果你使用普通的 CSS 将此类应用于子容器

position: absolute,
margin: auto,
top: 0,
right: 0,
bottom: 0,
left: 0,

【参考方案3】：

    HTML:

<div class="row imageCenterAlign topAlign">
        <div class="col">
            <img class="center-block image-center"  src="imagery/1.png"/>
        </div>
        <div class="col">
            <img class="center-block image-center"  src="imagery/2.png"/>
        </div>            <div class="col">
            <img class="center-block image-center"  src="imagery/3.png"/>
        </div>            <div class="col">
            <img class="center-block image-center"  src="imagery/4.png"/>
        </div>
    </div>

    <div class="row imageCenterAlign">
        <div class="col">
            <img class="center-block"  src="imagery/5.png"/>
        </div>            <div class="col">
            <img class="center-block"  src="imagery/6.png"/>
        </div>            <div class="col">
            <img class="center-block"  src="imagery/7.png"/>
        </div>            <div class="col">
            <img class="center-block"  src="imagery/8.png"/>
        </div>
    </div>

css:
.imageCenterAlign
    display: flex;
    justify-content: center;
    align-items: center;

.topAlign
    top:50%;

【参考方案4】：

我会推荐你​​使用display:flex，你只需要创建一个水平类和一个垂直类，然后根据你想要给它的方向将它分配给图像的div。

简单易行，我给你写sn-p，你只需要改边距，我也改了图片。

div.horizontal 
    display: flex;
    justify-content: center;
    margin-bottom: 15px;


div.vertical 
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 15px;

<div class="row horizontal">
        <div class="col vertical">
            <img class="center-block image-center"  src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
        </div>

        <div class="col vertical">
            <img class="center-block image-center"  src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
        </div>            <div class="col vertical">
            <img class="center-block image-center"  src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
        </div>            <div class="col vertical">
            <img class="center-block image-center"  src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
        </div>
    </div>

    <div class="row horizontal">
        <div class="col vertical">
            <img class="center-block"  src="imagery/5.png"/>
        </div>            <div class="col vertical">
            <img class="center-block "  src="imagery/6.png"/>
        </div>            <div class="col vertical">
            <img class="center-block"  src="imagery/7.png"/>
        </div>            <div class="col vertical">
            <img class="center-block"  src="imagery/8.png"/>
        </div>
</div>

希望对你有帮助。

【参考方案5】：

最好的方法是使用 flexbox imho。

HTML：

<div class="group">
  <img src="https://fakeimg.pl/150x100/?text=Hello" />
  <img src="https://fakeimg.pl/150x110/?text=Hello" />
  <img src="https://fakeimg.pl/150x120/?text=Hello" />
  <img src="https://fakeimg.pl/150x80/?text=Hello" />
  <img src="https://fakeimg.pl/150x70/?text=Hello" />
  <img src="https://fakeimg.pl/150x100/?text=Hello" />
  <img src="https://fakeimg.pl/150x115/?text=Hello" />
  <img src="https://fakeimg.pl/150x90/?text=Hello" />
  <img src="https://fakeimg.pl/150x100/?text=Hello" />
  <img src="https://fakeimg.pl/150x120/?text=Hello" />
</div>

CSS：

DIV.group 
 display:flex;
 flex-flow:row wrap;
 justify-content:space-between;
 align-items:center;
 align-content:stretch;

【参考方案6】：

如果您使用的是 Bootstrap 4（您似乎是），您可以使用像 align-items-center justify-content-center

 <div class="col d-flex align-items-center justify-content-center">

更多信息：https://getbootstrap.com/docs/4.1/layout/grid/#alignment