当前位置：文江博客话题详情

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

发布于 2024-10-03 02:49:23 字数 113 浏览 9 评论 0原文

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

PUPPY!!

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

好久不见√ 2024-10-10 02:49:23

Vertical-align:middle 两者

http://jsfiddle.net/W7b4U/

回复收藏 0 原文

灼痛 2024-10-10 02:49:23

您可以执行一些操作，但这取决于问题的具体情况。有几个问题：

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

如果照片总是相同的高度，并且只有一行文本，您可以将文本的 line-height 设置为等于照片的大小，然后将照片设置为 浮动：向左。

如果可能有多行文本，您可能需要使用 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});
});

There's a few things you can do but it depends on the specifics of the problem. A few questions:

Is the photo always the same height?
Is there always only one line of text, or could there be several lines that wrap around?
Is the text a block or inline level element?

If the photo is always the same height, and there's only one line of text, you can set the line-height of the text equal to the size of the photo and then set the photo to float:left.

If there could be several lines of text you might need to use an inline-block element and compute the top margin with javascript.

EDIT: Unfortunately, this can't be done using CSS alone since there's no vertical centering allowed on block level elements. Here's an example that'll work with any length of text in a div along with any size photo: 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});
});

回复收藏 0 原文