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/
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
