使用 CSS 将标题垂直居中到图像的右侧答案

【问题标题】：Vertically center a caption to the right of an image using CSS使用 CSS 将标题垂直居中到图像的右侧
【发布时间】：2011-05-12 09:23:32
【问题描述】：

我正在尝试使用 CSS 来实现这种布局（我猜没有表格。无论如何）。有什么想法吗？

【问题讨论】：

我几乎想对使用 Comic Sans 的这个问题投反对票。 :) bancomicsans.com/main
是的，但我认为这是使用其中一种线框图工具完成的......仍然......很诱人。
我是用 Balsamiq 制作的（它是 Chalkboard，而不是 Comic Sans）
看起来 Robusto 应该因为不知道区别而被否决:)
我的最爱：youtube.com/watch?v=KzmrxKhaKRU

标签： css vertical-alignment centering

【解决方案1】：

Vertical-align:middle两者

http://jsfiddle.net/W7b4U/

【讨论】：

只要它们都是inline 级别的元素并且文本不会超过一行。
按照他的例子：)
我认为在这种情况下你只需要对图像进行垂直对齐 - 垂直对齐对跨度没有任何作用
是的，如果你使用块元素，这会变得一团糟。

【解决方案2】：

您可以做一些事情，但这取决于问题的具体情况。几个问题：

照片的高度是否始终相同？
是否总是只有一行文本，还是可以有几行环绕？
文本是block 还是inline 级别元素？

如果照片总是一样高，只有一行文字，可以设置文字的line-height等于照片的大小，然后设置照片为float:left。

如果可能有几行文本，您可能需要使用 inline-block 元素并使用 javascript 计算上边距。

编辑：不幸的是，这不能单独使用 CSS 来完成，因为块级元素不允许垂直居中。这是一个示例，可以处理 div 中任意长度的文本以及任意大小的照片：http://jsfiddle.net/W7b4U/39/

HTML

<img src="http://placehold.it/100x150">
<div class="align">align this  align this  align this  align this  align this  align this  align this  align this  align this  align this  align this  align this  align this  align this  align this  </div>

CSS

img {float: left;}

Javascript/JQuery

$(document).ready(function() {
    var $text = $('.align');
    var $img = $('img');
    var margin = ($img.outerHeight() - $text.outerHeight()) / 2;
    var textPadding = 10;
    $text.css({marginTop: margin, marginLeft: $img.outerWidth() + textPadding});
});

【讨论】：

照片的高度并不总是一样的；可能有几条换行；文本可以是块或内联（取决于上下文）
查看上面的代码。不确定你是否熟悉 jQuery，但我试图让它易于理解。基本上它只是计算在页面加载时居中文本所需的边距。不是最佳的，但它有效。
很好：这是正确的行为。值得为此使用JS吗？是否有适用于 IE7+ / IE8+ 的纯 CSS 版本？我可以使用 inline-block 元素来实现这一点吗？
不幸的是，由于块（和内联块）级别元素缺乏垂直对齐支持，目前仅使用 css 无法完成此操作。我到处寻找我自己的东西，最后我总是求助于 JS，因为它是跨浏览器最可靠的。希望对您有所帮助。
所以基本上 CSS 是垃圾？桌子会有帮助吗？还有一个问题：假设图像总是相同的大小，但文本的长度是可变的（因此可能会换行）。在这种情况下，我有任何纯 CSS 选项吗？

【解决方案3】：

查看 table 和 cell CSS 属性（尤其是具有单个单元格且内容垂直和水平居中的表格的基本情况）。

http://www.w3.org/TR/CSS2/tables.html#img-cell-align

【讨论】：