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

Question

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

Answer 1

Vertical-align:middle

http://jsfiddle.net/W7b4U/

Answer 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});
});

Answer 3

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

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