ホームページ > 記事 > ウェブフロントエンド > display:table-cell を使用して垂直方向の中央揃えを実現するにはどうすればよいですか?
display:table-cell を使用して垂直方向の中央揃えを実現するにはどうすればよいですか?
- 不言オリジナル
- 2018-10-24 15:26:255059ブラウズ
Web ページのレイアウトでは、画像やテキストを垂直方向に中央揃えにする必要があることがよくあります。今日は、display:table-cell 属性を使用して垂直方向の中央揃えを実現する方法を紹介します。具体的な内容は以下を参照してください。
まず第一に、display:table-cell 属性について簡単に見てみましょう
display:table-cell 属性は、label 要素が次の形式で表示されることを意味します。 td タグと同様に、表のセルの場合は、display:table-cell を使用して、非固定サイズの要素を垂直方向に中央揃えにします。
次に、display:table-cell が垂直方向のセンタリングを実現する具体的な例を見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.img{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height: 300px;
border: 1px solid lightgreen;
background-color: lightblue;
}
.text{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
border: 1px solid lightgreen;
padding: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>
<div>
<img src="image/girl.jpg" width="80px" height="100px" alt="">
</div>
<div>
<p>php中文网在线免费教程 </p>
</div>
</div>
</body>
</html>display:table-cell は次のように垂直方向のセンタリングを実現します:
注: 1. IE6/7 は、display:table-cell 属性をサポートしません。2. table-cell は、margin 属性をサポートしません (ただし、パディングはサポートします)。 3. CSS プロパティが破壊されるため、フローティング/配置と同時に使用しないでください。
上記はこの記事の全内容です。display:table-cell 属性の詳細については、php 中国語 Web サイト css Learning Manual を参照してください。
以上がdisplay:table-cell を使用して垂直方向の中央揃えを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。