css - 动态图像垂直居中

Question

这是我的情况:我有一个不同尺寸(总是不同)的变化图像被带入我们的飞溅区域。几天前我发布了一个有关此问题的问题，并采用了有人建议的解决方案。然而，还有其他问题我还必须处理，我回来了一个更新的页面，修复了其他问题，但我现在需要了解如何在这个新代码中垂直居中图像

首先，这是页面:http://americanart.si.edu/index_newsplash3m.cfm

这是我们博客 slider 下方的中间图像。这是代码和CSS:

代码:

 <div class="middle">
    <div class="middleimage">


            <img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image" /><br />


        </div>


    <div id="middletext">

            <p>
<a href="http://americanart.si.edu/collections/search/artwork/?id=19670"><i>The Dying Tecumseh</i></a> by Ferdinand Pettrich has returned to the second floor galleries at American Art after his extended stay with the National Portrait Gallery for the exhibition, <a href="http://www.npg.si.edu/exhibit/exh1812.html"><i>1812: A Nation Emerges</i></a>. Visit his new spot among the ...

                </i>

            <span class="red"><a href="http://eyelevel.si.edu/">Read more...</a></span> </p>

        </div>
        </div>

这是 CSS:

.middle {
    float: left;
    width: 30.5%;
    margin-right: 2.1%;
    margin-bottom: 2% ;
    background-color: #fff;
    min-height: 100%;
    background: url(/@res/img/americanart_blog_test.jpg) no-repeat #fff;
    padding-top: 31px;
    text-align: center;
    position: relative;
}

div.middleimage { height: 207px;
}

div#middletext {margin-right: 2.1%;
    margin-bottom: 2% ;
    background-color: #fff;
    min-height: 100%;
}
div.middle img#middleimg { max-height: 207px;
    max-width: 291px; 
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    vertical-align: middle;
    position: relative;
}

我必须在图像和文本周围创建一些新的嵌套 div，以防止当图像高度较小时文本进入图像区域。

谢谢。

Answer 1

对于 div.middleimage 添加此 css 规则:

display:table;

然后将 div 包裹在您的实际 img 标签周围，如下所示:

<div id="imagewrap"><img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image"></div>

并将此规则添加到您的 CSS 中:

#imagewrap {
display:table-cell;
vertical-align:middle;
}