1

我正在尝试创造一些东西

像这样

<div class="model-info">
<div class="mainholder">
  <div class="divImage centeredImageContainer" align="center"> 
  <a href="talent_view.aspx?uid=e7385d69-8659-4ab4-a55d-d693ca9ba816">
        <img  class='centeredImage' style='width:80px;' src="http://t0.gstatic.com/images?    q=tbn:ANd9GcRX9N8qSDD4OhL9XH0N8RTbf3bObBR5TrqKeyUFxi-ZpAKQxyVsrw" alt="Anne" title="Anne">
   </a>
 </div>

CSS如下：

.centeredImageContainer
{
  position:relative;
 }
 .centeredImage
{position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;}

但是当我尝试以绝对位置垂直居中图像时，它会扰乱所有设计，

像这样

图像是动态的，没有固定大小。

此外，当我更改 px 中的 .divimage 高度时，它接受但在 % 中时，它适用于 0px 高度。

如何将此图像设置为垂直居中。还是我错过了什么？

谢谢你

4

2 回答 2

3

当图像没有固定大小时很困难。abbood 的另一种解决方案是将图像设置为 div 的背景图像并将背景位置设置为center center：

<div style="height: 600px">         
    <a href="#">
            <div style="text-align:center; height:100%; border-style:solid;  background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcRX9N8qSDD4OhL9XH0N8RTbf3bObBR5TrqKeyUFxi-ZpAKQxyVsrw) no-repeat center center;">
            </div>
    </a>
</div>

缺点是无法更改图像大小，除非使用 CSS3 属性background-size。

于 2013-02-16T11:40:45.797 回答
1

看我的jsfiddle

基本上我使用了这个技巧：

 <div class="outer"> 
  <div class="middle">
    <div class="inner">
      <!-- content to be vertically centered-->
    </div>
  </div>
 </div>

和CSS：

.outer {
    display: table;
    position: static;
    height: 9.22em; /* the height you want to center according to */

}
.middle {
    display: table-cell;
    vertical-align: middle;
    position: static;
}
.inner {
    margin-left: auto;
    margin-right: auto;
}

笔记：

  • 应避免使用绝对定位.. b/c 它将元素从文档流中取出.. 这会导致意外结果，例如您的情况
  • 在我的解决方案中，您必须知道要居中的高度..所以在我的情况下..我认为右表的高度约为 9.22em..所以我把它放了。
于 2013-02-16T11:21:35.363 回答