divの中央に画像を垂直方向に配置し、水平方向にも配置したい。現在、私のコードは水平方向の配置でのみ機能しますが、垂直方向にも配置したいと考えています。手伝ってくれませんか?
ここに私のcssコードがあります:
.centre
{
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
img
{
vertical-align: middle;
}
divの中央に画像を垂直方向に配置し、水平方向にも配置したい。現在、私のコードは水平方向の配置でのみ機能しますが、垂直方向にも配置したいと考えています。手伝ってくれませんか?
ここに私のcssコードがあります:
.centre
{
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
img
{
vertical-align: middle;
}
display:table-cell;
で使用するだけ .centre
です。これを明確に示す例を次に示します。それに応じてセレクターを変更してください。http://jsfiddle.net/Y6NTf/
もう 1 つのオプションは、img
position
を relative に設定し、top
andleft
をに設定すること50%
です。これは完全な作業例です。
HTML:
<div id="myDiv">
<img id="myImg" src="http://i.cdn.turner.com/cnn/.element/img/3.0/global/header/hat/arrow_black.png"></img>
</div>
CSS:
#myDiv {
height: 300px;
width: 300px;
background: grey;
}
#myImg {
position:relative;
top: 50%;
left: 50%;
}