Question

我有一个背景图像（480x360），顶部有两个条（100％宽，20px高），一个在顶部，另一个在底部。请注意，条形图位于图像的顶部，因此它们不会添加到其大小。最终结果还是480x360。

我遇到的问题是垂直居中文本。

我已经搜索过（下面的链接）并尝试了几种不同的方法，但似乎没有任何效果。

How do I vertically center text with CSS?

Vertically align text in a div

Absolute Horizontal And Vertical Centering In CSS

这是一行文字，不应该那么难......我可能会犯一些n00b错误。

文本正确居中非常重要，而不仅仅是有点居中......

有人可以帮我一把吗？感谢。

HTML：

<div id="panel4" class="panels" style="cursor: move; z-index: 48">
<div class="title">TITLE | THIS IS THE TITLE</div>
<div id="picture4"><img src="http://i.imgur.com/fbEGCcY.png" width="480" height="360"></div>
<div class="footer">FOOTER | THIS IS THE FOOTER</div>
</div>

CSS：

.panels {
position: absolute;
}

#panel4 {
display: inline-block;
position: relative;
}

.title {
position: absolute;
font-family: Monaco;
font-size: 10px;
line-height: 20px;
text-align: left;
height: 20px;
color: #fff;
background: #000000;
width: 100%;
text-indent: 6px;
}

.footer {
position: absolute;
font-family: Monaco;
font-size: 10px;
line-height: 20px;
text-align: right;
bottom: 0;
color: #fff;
background: #000000;
width: 100%;
}

JSFiddle

Answer 1

你的意思是图片上方栏中的文字？

在＆lt; p＆gt;中的页眉/页脚div中包装文本＆LT; / p为H.标签

添加

vertical-align:middle;

到p。

JSFiddle

Answer 2

您的问题已解决，请参阅此链接＆gt;＆gt;＆gt;＆gt;＆gt;＆gt; Middle aligned text

使用段落的行高进行垂直对齐文本！

HTML

<div id="panel4" class="panels" style="cursor: move; z-index: 48">
        <div class="title">TITLE | THIS IS THE TITLE</div>
        <div id="picture4">
            <p>Your text</p><img src="http://i.imgur.com/fbEGCcY.png" width="480" height="360"></div>
        <div class="footer">FOOTER | THIS IS THE FOOTER</div>
    </div>

CSS

    .panels {
    position: absolute;
}

#panel4 {
    display: inline-block;
    position: relative;
}

.title {
    position: absolute;
    font-family: Monaco;
    font-size: 10px;
    line-height: 20px;
    text-align: left;
    height: 20px;
    color: #fff;
    background: #000000;
    width: 100%;
    text-indent: 6px;
}

.footer {
    position: absolute;
    font-family: Monaco;
    font-size: 10px;
    line-height: 20px;
    text-align: right;
    bottom: 0;
    color: #fff;
    background: #000000;
    width: 100%;
}
#picture4 img{
    z-index:-2;
}
#picture4 p{
    z-index:2;
    position:absolute;
    line-height:360px;
    height:360px;
    width:480px;
    text-align:center;
    vertical-align:middle;
    color:red;
    font-size:22px;
}

Answer 3

最后!!!我得到了它的工作！

非常感谢@Dave Salomon和@Eirenaios的帮助！

这是最终的代码:(希望将来可以帮助其他人）

HTML：

<div id="panel4" class="panels" style="cursor: move; z-index: 48">
<div class="title"><span>&nbsp;TITLE | THIS IS THE TITLE</span></div>
<div id="picture4"><img src="http://i.imgur.com/fbEGCcY.png"></div>
<div class="footer"><span>FOOTER | THIS IS THE FOOTER&nbsp;</span></div>
</div>

CSS：

.panels {
position: absolute;
}

#panel4 {
position: relative;
display: inline-block;
}

#picture4 {
width: 480px;
height: 360px;
}

.title {
width: 100%;
height: 20px;
color: #fff;
background: #000;
font-family: Monaco;
font-size: 10px;
font-weight: normal;
text-align: left;
line-height: 20px;
position: absolute;
}

.footer {
width: 100%;
height: 20px;
color: #fff;
background: #000;
font-family: Monaco;
font-size: 10px;
font-weight: normal;
text-align: right;
line-height: 20px;
bottom: 0;
position: absolute;
}

span {
vertical-align: middle;
display: inline-block;
line-height: normal;
}

麻烦垂直居中文本

3 个答案: