代码之家 › 专栏 › 技术社区 › Matthew

在引导网格中垂直和水平居中图像

center image html5 css html

Matthew · 技术社区 · 6 年前

我很难弄清楚如何将图像垂直和水平居中。基本上我有两行图像,所有的宽度都是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" width="150" src="imagery/1.png"/>
        </div>
        <div class="col">
            <img class="center-block image-center" width="150" src="imagery/2.png"/>
        </div>            <div class="col">
            <img class="center-block image-center" width="150" src="imagery/3.png"/>
        </div>            <div class="col">
            <img class="center-block image-center" width="150" src="imagery/4.png"/>
        </div>
    </div>

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

6 回复 | 直到 6 年前

tius 6 年前

如果您使用的是Bootstrap 4(看起来是),那么您可以使用如下的flex对齐类 项目居中对齐资源中心对齐

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

kunambi 6 年前

最好的方法是使用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;
}

GonzaloPani 6 年前

我建议您使用 display:flex ,您只需要创建一个水平类和一个垂直类,然后根据要给它的方向将其分配给图像的div。

这很简单,我给你写的片段,你只需要改变边距,我也改变了图像。

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" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
        </div>

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

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

希望对你有帮助。

Brajesh Pandey 6 年前

    HTML:

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

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

css:
.imageCenterAlign{
    display: flex;
    justify-content: center;
    align-items: center;
}
.topAlign{
    top:50%;
}

AymDev 6 年前

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

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

-1

Martin 6 年前

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

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