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

如何按高度对齐到中间

发布于 2024-12-06 11:27:59 字数 342 浏览 0 评论 0原文

我想创建图像框（带图像）。
当文本位于框的顶部时，它很难看。

如何将文本居中对齐？
我尝试使用 vertical-align，但它似乎不起作用

我的演示代码

编辑：
您的解决方案适用于短信。
但如果它们是多行的，那就又丑了。
如果我们不需要，是否可以不增加行的大小？

在此处输入图像描述

原文

分享到QQ

分享到微博

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

发布评论

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

蓝咒 2024-12-13 11:27:59

如果您想要将一个块与多行居中对齐，您可以在该块周围使用 display:inline-block 。因此，如果您有：

<div class="messageInfo">
   <div class="messageInner">You are logged out<br>You are crazy<br> gogo</div>
</div>

添加

.messageInfo{
    background: lightskyblue;
    background-image: url(https://i.sstatic.net/Z6lkS.png) ;
    background-repeat: no-repeat;
    min-height: 32px;
    vertical-align: middle;
    padding-left:32px;
    line-height:32px;
}

请

.messageInner {
    display:inline-block;
    line-height:1.2em;
    vertical-align:middle;
}

参阅 http://jsfiddle.net/yNpRE/1/ 和 http://jsfiddle.net/yNpRE/

不过请注意，虽然这在现代浏览器中有效，但它不适用于 IE7 或更早版本。

If you want to middle align a block with multiple lines, you can use display:inline-block around that block. So if you have:

<div class="messageInfo">
   <div class="messageInner">You are logged out<br>You are crazy<br> gogo</div>
</div>

with

.messageInfo{
    background: lightskyblue;
    background-image: url(https://i.sstatic.net/Z6lkS.png) ;
    background-repeat: no-repeat;
    min-height: 32px;
    vertical-align: middle;
    padding-left:32px;
    line-height:32px;
}

add

.messageInner {
    display:inline-block;
    line-height:1.2em;
    vertical-align:middle;
}

See http://jsfiddle.net/yNpRE/1/ and http://jsfiddle.net/yNpRE/

Be warned though, that while this works in modern browsers, it doesn't work with IE7 or earlier.

回复收藏 0 原文

予囚 2024-12-13 11:27:59

通常工作正常的是 line-height：

line-height: 32px;

http://jsfiddle.net/DhHnZ/ 2/

What usually works fine is line-height:

line-height: 32px;

http://jsfiddle.net/DhHnZ/2/

回复收藏 0 原文

薄暮涼年 2024-12-13 11:27:59

将 line-height 设置为 div 的 height。

所以

.messageInfo{
    background: lightskyblue;
    background-image: url(https://i.sstatic.net/Z6lkS.png) ;
    background-repeat: no-repeat;
    min-height: 32px;
    vertical-align: middle;
    padding-left:32px;
    line-height:32px; //ADD THIS
}

工作示例： http://jsfiddle.net/jasongennaro/DhHnZ/1 /

Set the line-height to the height of the div.

.messageInfo{
    background: lightskyblue;
    background-image: url(https://i.sstatic.net/Z6lkS.png) ;
    background-repeat: no-repeat;
    min-height: 32px;
    vertical-align: middle;
    padding-left:32px;
    line-height:32px; //ADD THIS
}

Working example: http://jsfiddle.net/jasongennaro/DhHnZ/1/

回复收藏 0 原文

~没有更多了~