2

这是我的情况：我有一个不同大小（总是不同）的不断变化的图像被带到我们飞溅的区域。几天前我发布了一个关于这个的问题，并采用了有人建议的解决方案。但是，我还必须处理其他问题

首先，这是页面：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，以防止文本进入图像区域。

谢谢。

4

3 回答 3

2

要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;
}
于 2013-02-08T18:42:55.960 回答
1

您也可以在没有任何表格的情况下执行此操作，只需添加line-height: 207px;到您的中间图像类并且应该将图像居中放在里面。

div.middleimage {
line-height: 207px;
}
于 2013-02-08T18:46:14.217 回答
0

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

于 2013-02-08T19:00:10.530 回答