web-dev-qa-db-ja.com

Bootstrapグリッドで画像を垂直方向および水平方向に中央揃え

画像を垂直方向と水平方向の中央に配置する方法を理解できません。基本的に私は2行の画像を持っています。すべての幅は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>
csshtmlimagecenter
5
Matthew

Bootstrap 4（あなたのように思われる））を使用している場合、align-items-のようなフレックスアライメントクラスを使用できます。中央揃え-コンテンツセンター

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

詳細： https://getbootstrap.com/docs/4.1/layout/grid/#alignment

6
tius

このCSSはどのデバイスでも応答します。水平方向と垂直方向の中央に配置されます。

.col {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
1
vinoth s
    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%;
}
0
Brajesh Pandey

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>

お役に立てば幸いです。

0
GonzaloPani

これを実現する最良の方法は、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;
}
0
kunambi