0

マージンを使用してアイコンを中央に配置する方法を試しています。アイコンの幅を%で指定し、高さも%で指定しています。

.container{
width:600px;
height:200px;
background-color:orange;
}
img {
width:6%;
margin-left:47%;
margin-right:47%;
height:16%;
margin-top:12%;
margin-bottom:12%;
}
body{

}

このメソッドは、アイコンを水平方向に中央揃えしますが、垂直方向には中央揃えにしません。なぜこれが機能しないのだろうか

img {
    width:6%;
    margin-left:47%;
    margin-right:47%;
    height:16%;
    margin-top:42%;
    margin-bottom:42%;
    }

私もこのフィドルを持っていますが、私が使用したマージントップとマージンボトムはランダムですhttp://jsfiddle.net/thiswolf/EKWWt/

4

4 に答える 4

1

ファイアウォールのナンセンスのために画像が表示されませんが、この回答をご覧ください。また、ここに私のforked fiddleがあります。

.container{
    width:600px;
    height:200px;
    background-color:orange;
    text-align:center;
    line-height:138px; /*You'll have to play around with this value*/
}

img {
    vertical-align:middle;
}
于 2012-09-27T11:48:15.740 に答える
0

画像は、コンテナ div からではなく、本文からマージンを取っていると思います。画像を水平方向および垂直方向の中央に配置するには、position: relative; を設定できます。コンテナの div と position: absolute; img要素で。これは可能な解決策の1つです。

したがって、cssは次のようになります...

.container{
  width:600px;
  height:200px;
  background-color:orange;
    position: relative;
 }
 img {
 width:6%;
 margin-left:47%;
 margin-right:47%;
 height:16%;
 margin-top:42%;
 margin-bottom:42%;
    position: absolute;
}
于 2012-09-27T11:58:41.117 に答える