CSSはどのようにピクチャーの上下の垂直な中央を実現します

8992 ワード

縦中央に配置

CSSはどのように画像の上下垂直中央を実現します:
画像を上下に垂直に中央に配置する必要がある場合が多いが、この機能を直接実現できる属性は一つもない.もちろん、画像の上下垂直中央を実現する方法はどれくらいあるか、その2つを簡単に紹介します.
方法1:
margin方式を使用して、divで画像を上下垂直に中心にします.margin-top値の算出方法は、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>

以上のコードは画像の上下垂直中央を実現しているが、IE 7ブラウザではサポートされていない.実装方式はdivに次のコードを追加した.

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

原文の住所は次のとおりです.http://www.51texiao.cn/div_cssjiaocheng/2015/0503/593.html
最初のアドレスは次のとおりです.http://www.softwhy.com/

ウェブページの中でCSSは超長い英語、数字の自動改行を実現します

css 3遷移(transition)属性と構文