CSS_html/css_WEB-ITnose を使用して画像を上下に垂直方向に中央揃えする方法-htmlチュートリアル-php.cn

CSS_html/css_WEB-ITnose を使用して画像を上下に垂直方向に中央揃えする方法

WBOY

リリース： 2016-06-24 11:40:56

オリジナル

1398 人が閲覧しました

CSS を使用して画像を上下に垂直方向に中央揃えにする方法:

多くの場合、画像を垂直方向に上下に中央揃えにする必要がありますが、この機能を実現できる簡単なプロパティはありません。もちろん、画像を上下中央に配置する方法はたくさんあります。そのうちの 2 つを簡単に紹介します。

方法 1:

マージン方法を使用して、画像を div 内で上下に垂直方向の中央に配置します。マージントップの値は、div の高さ/2 ピクチャの高さ/2 として計算されます。

コード例は次のとおりです:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div {  height:400px;  width:400px;  border:1px solid red;}div img {margin-top:127px;}</style></head><body><div><img src="mytest/demo/border.jpg" alt="蚂蚁部落"></div></body></html>

ログイン後にコピー

方法 2:
コード例は次のとおりです:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div {  height:400px;  width:400px;  border:1px solid red;  vertical-align:middle;  display:table-cell;}</style></head><body><div><img src="mytest/demo/border.jpg" alt="蚂蚁部落" /></div></body></html>

ログイン後にコピー

上記のコードは画像を上下に垂直方向にセンタリングしますが、IE7 ブラウザはこれをサポートしていません。方法。
実装メソッドは、次のコードを div に追加します:

vertical-align:middle;display:table-cell;line-height:400px;

ログイン後にコピー

元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0503/593.html

最も元のアドレスは次のとおりです: http ://www.softwhy.com/