在Bootstrap网格中垂直和水平居中放置图像 [英] Center Image Vertically and Horizontally in Bootstrap Grid

问题描述

我在弄清楚如何使图像垂直和水平居中时遇到麻烦。本质上，我有两排图像，所有图像的宽度均为150，但高度各不相同。

I'm having trouble figuring out how to center an image vertically and horizontally. Essentially I have two rows of images, all have a width of 150 but heights vary.

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>

推荐答案

如果您使用的是Bootstrap 4（看来您是），您可以使用弹性对齐类，例如 align-items-center justify-content-center

If you're using Bootstrap 4 (it seems you are), you may use flex alignment classes like 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

这篇关于在Bootstrap网格中垂直和水平居中放置图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！