CSSで画像を垂直方向に中央揃えにする方法-CSSチュートリアル-php.cn

CSSで画像を垂直方向に中央揃えにする方法

云罗郡主

リリース： 2018-11-23 13:50:18

オリジナル

9279 人が閲覧しました

CSS で画像を中央に配置するにはどうすればよいですか?画像を垂直方向に中央揃えするにはどうすればよいですか? CSSを使い始めたばかりの初心者はよくわからないかもしれませんが、CSSでimgを縦方向に中央揃えにする方法をまとめてみましょう。

CSSで画像を垂直方向に中央揃えにする方法

img を垂直方向に中央揃えするには、次の 3 つの方法を含む多くの方法があります。

1. flex を使用して img を垂直方向に中央揃えにします

#CSS では、flex を使用して垂直方向の中央揃えを実現できますが、IE8 や 9 などの多くのブラウザでは現在 flex がサポートされていません。

まず、サポート画像に div を追加し、幅 100 ピクセル、高さ 100 ピクセルで定義し、その中で表示を設定するいくつかの基本属性を定義する必要があります。 div 内の要素を flex してから、align-items: center 属性を別の要素に追加します。

css コード:

body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}

ログイン後にコピー

2. 表示を使用して img の垂直方向の中央揃えを実現します

まず、最初に div を作成する必要があります。 div のスタイルを設定するには、属性テーブルを使用して img の親に diaplay を追加し、画像を含む div の表示属性を table-cell に設定します。センタリングを実現するには、div をvertical-align: middle; 属性に変更するだけです。

css コード:

.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}

ログイン後にコピー

3. 画像の絶対位置を使用して

画像を含む div を背景を持つように設定します。を指定し、img の親要素に相対属性を追加し、子要素に絶対属性と相対属性を追加し、先頭の値を 50% に設定します。ここで行う必要があるのは、img 要素に負の margin-top 値を設定することです。。

css コード:

body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}

ログイン後にコピー

上記 3 つの方法のうち、3 番目の方法は互換性が高く、方法と原則を習得することに重点を置いています。

上記は、CSS を使用して img を垂直方向に中央揃えする方法の完全な紹介です。

CSS3 チュートリアルについて詳しく知りたい場合は、php 中国語 Web サイトに注目してください。

以上がCSSで画像を垂直方向に中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。