0

我在将图像定位在 div 中时遇到了一些困难。div 固定为 219x197px，但是图像是用 wordpress 加载的，我需要对其进行校对，以便即使图像小于或大于该图像，它也会居中，如果更大，溢出隐藏，如果更小，则拉伸或居中（什么当它的较小并不重要时发生）。

我不想调整图像的大小，我只想将其显示为居中，并且显示适合 div 的任何内容，而其余部分则被溢出隐藏。

我发现了另一个问题，我设法将它水平居中，但我不能垂直做。

我尝试了一些带有百分比的margin-left，但它对于不同的图像尺寸并不恒定。我也尝试了一些东西，line-height但vertical-align似乎没有什么能正常工作。

有谁知道我可以尝试什么？提前致谢！这是水平居中的 HTML 和 CSS：

<div class="img_article">
<span>
<?php get_post_image($post->ID,'large'); ?>
</span>
</div>

.img_article {
    border-bottom: 1px solid #EF5589;
    overflow: hidden;
    width: 219px;
    height: 197px;
    text-align: center;
}
.img_article > span {
    display: block;
    width: 1000px;
    height: 1000px;
    margin-left: -390px; /* -(width-container width)/2 */
}
.img_article > span > img {
    display: inline-block;
}
4

1 回答 1

0

我不知道你用 line-height 和 vertical-align 尝试了什么，但它应该可以工作。

.img-hold { height: 200px; line-height: 200px; text-align: center; }
.img-hold img { verticale-align: middle; }

演示

于 2013-08-28T22:21:40.143 回答