ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose を使用して画像を上下に垂直方向に中央揃えする方法
CSS_html/css_WEB-ITnose を使用して画像を上下に垂直方向に中央揃えする方法
- WBOYオリジナル
- 2016-06-24 11:40:561363ブラウズ
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/声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。