html - 如何使用 css 从中心而不是顶部/底部/侧面对齐任意大小的图像

Question

我希望能够定位图像(蓝色)，以便无论大小如何，它始终相对于后面的 div(红色，而不是包含的 div)的基线居中。后面的 div 将始终具有相同的大小/位置。

最好只使用 css，因为我使用的是 drupal，而且我不太了解 tpl 文件之外的编辑。

谢谢!

编辑:这是布局 http://pastebin.com/SisQHM4y

Answer 1

你好，你可以像这样做这个纯CSS

CSS

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 500px;
    height: 400px;
    background:green;
}

HTML

<div class="wraptocenter"><img src="//?" alt="images" /></div>

现场演示 http://jsfiddle.net/rohitazad/tvrMp/

有关此的更多信息 http://www.brunildo.org/test/img_center.html