Question

它可能听起来很愚蠢，但我在div中对齐图像时遇到问题。我试过用

-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

它在chrome和opera上运行良好。但它在firefox和safari中有一点空白。对于IE，代码似乎不起作用。之后我用这个替换代码使其成为中心。

margin: -50% 0 0 -50%;

但是图像在中心没有垂直对齐。我的问题是为什么以及如何解决这个问题？

欢迎任何反馈，谢谢

Answer 1

使用css作为新标准时，中心对齐有时很棘手所有使用html5语言编写的网页都必须使用css进行对齐，否则将无法成功验证为html5。下面我将举个例子： http://jsfiddle.net/zd9z7/

  <div class="div1">
  <img src="" alt="" class="image1">
  </div>

 .image1 {
  height:100px;
  width:100px;
  vertical-align:10%;
  background-color:black;
 }

  .div1 {
  text-align:center;
  height:200px;
  width:200px;
  background-color:red;
  }

Answer 2

我会在你的div上保持相对位置，然后将你的图像绝对定位在其中。将图像上的顶部和左侧值设为50％，然后将顶部和左侧的边距分别设置为宽度和高度的一半。

以下是一个示例：http://jsfiddle.net/gYLf9/

.holder {width:400px; height:400px; background:red; position:relative;}
.img {
    position:absolute; 
    height:100px; 
    width:100px; 
    border:1px solid #000; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-50px 0px 0px -50px
    }

显然，请更改图像的宽度，高度和边距以适合图像大小。

将图像垂直和水平对齐在div的中心

2 个答案: