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

Question

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

Answer 1

Vertical-align:middle两个都

http://jsfiddle.net/W7b4U/

Answer 2

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

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

Answer 3

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

• 照片总是一样高吗？
• 总是只有一行文本，还是可以有几行环绕？
• 文本是一个元素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});
});