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

Question

我正在尝试使用CSS（不使用表格，我猜。随便）实现这个布局。有什么想法吗？

- Tom Lehman

---

我本来几乎想要对这个问题点“踩”按钮，因为它使用了Comic Sans字体。 :) http://bancomicsans.com/main/ - Robusto

我用 Balsamiq 制作的（它不是 Comic Sans，而是 Chalkboard） - Tom Lehman

看起来Robusto应该被点踩，因为他不知道这个区别 :) - markquezada

我最喜欢的是：http://www.youtube.com/watch?v=KzmrxKhaKRU - Robusto

@Robusto 哈哈... 没看过那个版本。不错。 - markquezada

Answer 1

垂直对齐:居中 两者都适用

http://jsfiddle.net/W7b4U/

- Gregg B

---

只要它们都是“inline”级别的元素，并且文本不超过一行，这就可以正常工作。 - markquezada

它们与他的示例相同 :) - Gregg B

在这种情况下，我认为您只需要在图像上使用vertical-align属性 - 对于span元素而言，vertical-align属性没有任何作用。 - stephenmurdoch

如果您正在使用块元素，那么这将变得混乱。 - Gregg B

Answer 2

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

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

- Amos Anony

Answer 3

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

• 照片的高度始终相同吗？
• 文本总是只有一行，还是可能有几行环绕？
• 文本是块级元素还是行内元素？

如果照片的高度始终相同，并且只有一行文本，则可以将文本的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});
});

- markquezada

---

照片的高度并不总是相同的；它可能有几行被换行包裹；根据上下文，文本可以是块级或行内。 - Tom Lehman

请查看上述代码。不确定您是否熟悉jQuery，但我尝试使其易于跟踪。基本上，它只是在页面加载时计算居中文本所需的边距。虽然不是最佳选择，但它可行。 - markquezada

不错：这是正确的行为。但是使用JS值得吗？有没有纯CSS版本适用于IE7+ / IE8+？我能用inline-block元素实现这个效果吗？ - Tom Lehman

很遗憾，目前仅使用CSS无法实现此功能，因为块级（和内联块级）元素缺乏垂直对齐支持。我已经搜索了所有自己的东西，最终都不得不求助于JS，因为它在各种浏览器中最可靠。希望这有所帮助。 - markquezada

那么基本上CSS很垃圾？表格有帮助吗？还有一个问题：假设图像始终具有相同的大小，但文本长度可变（因此可能换行）。在这种情况下，我有任何仅使用CSS的选项吗？ - Tom Lehman

不，CSS并不是垃圾，这只是其中一种特殊情况，在这种情况下，使用CSS目前很难进行此类型的布局。除非文本和图像都具有固定高度，否则您无法仅使用CSS进行此类型的布局。如果它们都是已知高度（比如50px），您可以使用“top: 50％”和“margin-top: -25px”来使块垂直居中，但这仅适用于已知的容器高度。 - markquezada