您可以做一些事情,但这取决于问题的具体情况。几个问题:
照片的高度总是一样吗?
是否总是只有一行文字,或者可能有几行环绕?
该文字是block还是inline级元素?
如果照片的高度始终相同,并且只有一行文字,则可以将文字的line-height设置为等于照片的尺寸,然后将照片设置为float:left
如果可能有多行文字,您可能需要使用inline-block元素并使用javascript计算上边距。
编辑:不幸的是,由于块级元素上不允许使用垂直居中,因此无法单独使用CSS。以下示例适用于div中任意长度的文字以及任何尺寸的照片:http://jsfiddle.net/W7b4U/39/
HTML 强>
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
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});
});