Question

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

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

这是滑块下我们博客的中间图像。这是代码和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;

然后在你的实际img标签周围包裹一个div：

<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;
}

Answer 2

您也可以在没有任何表的情况下执行此操作，只需将line-height: 207px;添加到您的middleimage类，并将图像置于其中。

div.middleimage {
line-height: 207px;
}

Answer 3

据我所知，在CSS中垂直居中几乎是不可能的。有一篇我一直想读的文章可以帮到你：http://designshack.net/articles/css/how-to-center-anything-with-css/

垂直居中动态图像

3 个答案: