CSSを使用して画像を垂直方向と水平方向の中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSSを使用して画像を垂直方向と水平方向の中央に配置するにはどうすればよいですか?

伊谢尔伦

リリース： 2017-07-20 09:15:59

オリジナル

1426 人が閲覧しました

CSS画像は水平方向に中央揃えです

CSSスタイルのmargin: 0 autoを追加して画像の中央揃えを実現するには、次のようにmargin: 0 autoを使用します:

<p style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="margin: 0 auto;" />
</p>

ログイン後にコピー

テキストの水平方向の中央揃え属性を使用します text-align: center

<p style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="display: inline-block;" />
</p>

ログイン後にコピー

css画像は垂直方向です中央揃え

画像を垂直方向に中央揃えにするには、height == 行の高さを使用します

このメソッドは、高さがわかっている場合にのみ使用できます。コードは次のとおりです:

<p style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">   
<img alt="" src="jgylogo3.gif" style="display: inline-block; vertical-align: middle;" />
</p>

ログイン後にコピー

画像を垂直方向に中央揃えにするにはテーブルを使用します

を使用するメソッドです。 table はテーブル属性の垂直方向のセンタリングを使用します。コードは次のとおりです。

ここでは、table をシミュレートするために、display: table; を使用します。このメソッドは、IE6/IE7 とは互換性がありません。 IE67 をサポートする必要がない場合は、次のことを行うことができます。欠点: display: table を設定すると、元のレイアウトが変更される可能性があります

画像を垂直方向に中央に配置するには、絶対配置を使用します

画像の幅と高さがわかっている場合、コードは次のとおりです:

<p style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">
<span style="display: table-cell; vertical-align: middle; ">
<img alt="" src="jgylogo3.gif" style="display: inline-block;" />
</span>
</p>

ログイン後にコピー

モバイル端末では、CSS 画像の垂直方向の中央揃えを実現するためにフレックスレイアウトを使用できます

モバイル端末の一般的なブラウザのバージョンは比較的高いため、大胆に使用できます。 flex レイアウト (flex レイアウトについては、css3 の flex レイアウトの使用法を参照してください) デモのコードは次のとおりです:

<p style="width: 500px;height:200px; position: relative; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</p>

ログイン後にコピー

以上がCSSを使用して画像を垂直方向と水平方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。