Question

我需要有一个相对于div顶部和div侧面居中的图像。换句话说，div的左边缘和图像的左边缘之间的空间量必须与相对侧的空间量相同。对于div的上边缘和图像的上边缘也是如此。我查看了this问题中的以下代码并得到了这个（除了类是ids之外几乎相同）。

CSS：

#img_holder {
    background-color:#EC0610;
    height: 500px;
    float:left;
    width: 550px;
    text-align: center;
}

#vertical_center {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}    

#image {
    vertical-align: middle;
    max-height: 500px;
    max-width: 550px;
}

HTML：

<div id="img_container">

  <div id="left_ctrl">

      Left control buttons

  </div>

  <div id="img_holder">

      <div id="vertical_center">

           <!-- Image inserted by javascript but the resulting html is this --> 
           <img id="image" src="../../images/bball1.jpg />

      </div>

  </div>

  <div id="right_ctrl">

      Right control buttons

  </div>

</div>

我的图像显示为水平居中，但不是垂直居中。任何想法为什么？浏览器是在Arch Linux上运行的Chromium 32。

Answer 1

HTML：

<div id="img_holder">
    <img id="image" src="http://placehold.it/300x300">
</div>

CSS：

#img_holder {
    background-color:#EC0610;
    height: 500px;
    width: 550px;
    position: relative;
}

#image {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 300px;
   height: 300px;
   margin-top: -150px; /* Half the height */
   margin-left: -150px; /* Half the width */
}

DEMO：JSFIDDLE

Answer 2

好吧，考虑到this approach，你的标记出错了。图像不应嵌套在#vertical_center元素中。换句话说，#image和#vertical_center元素应为兄弟，如下所示：

<div id="img_holder">
    <div id="vertical_center"></div>
    <img id="image" src="http://placehold.it/200" />        
</div>

<强> UPDATED DEMO

此外，两个inline-block元素之间会有一个空格字符。您可以通过将其父级的font-size设置为0（或使用image replacement技术）来删除它：

#img_holder {
    font: 0/0 a;
    /* other styles... */
}

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

2 个答案: