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

由于防火墙废话，我看不到您的图像，但请看一下这个答案。这也是我的分叉小提琴。

.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

尝试：

.container{
width:600px;
height:200px;
background-color:orange;
}
img {
margin:12% 50%;
}
于 2012-09-27T11:43:41.463 回答
0

您可以尝试将图标作为背景放置。如果因为它是动态加载而要求它在 html 中，那么您可以使用 javascript 将其替换为背景。

于 2012-09-27T11:44:22.933 回答
0

我认为图像是从主体而不是从容器 div 中获取边距。要水平和垂直居中图像，您可以设置位置：相对；在容器中 div 和 position: absolute; 在 img 元素中。这可能是可能的解决方案之一。

所以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 回答