web-dev-qa-db-ja.com

vhを使用してdiv内を垂直方向に中央揃え

私は現在、vhで設定されたサイズのdiv内で画像を中央に配置しようとしています。画像を中央に配置するdisplay:table-cell;メソッドを使用してみましたが、他の要素のvwをいじり始めました。この画像をvhのようなdiv内で垂直方向に中央揃えにする別の簡単な方法があるかどうか疑問に思いました。これは少し混乱するかもしれないので、下のコードが役立つことを願っています！

HTML：

<div class="graphic" style="background-color:#ff837b">
    <img src="images/WAInduo-02.svg" style="width: 100%; height: 50%;" />
</div>

CSS：

#induoIntro .graphic {
    display:block;
    height:100vh;
}
htmlcssvertical-alignmentcenteringviewport-units
12
kduan

のようだ vertical-align:middleはvw単位といくつかの矛盾があります。ポジショニングアプローチを試してください。これがあなたのための解決策です。

CSSコード：

.graphic {
  display: block;
  height: 100vh;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.graphic img {
  vertical-align: middle;
  width: 100%;
  display: inline-block;
  height: 50%;
  position: absolute;
  top: 0;
  bottom: 0%;
  margin: auto;
}

これが作業中です フィドル

6
Ashish Balchandani