Question

这是我得到的：

<div class="slideshow">
    <span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet.</span>
    <span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />

CSS：

/* slideshow */
.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
width:940px;
height:64px;
}

<span>目前水平居中，但它们也应垂直居中。这可能吗？

整个想法是在背景图像上显示推荐（左侧和右侧的引号），但如果没有水平和垂直的中心，它看起来不太正确。

我确信我可以使用padding获得预期的效果，但由于每个推荐书的长度不同，我认为这不是一个好方法。

Answer 1

如果您知道跨度的内容永远不会超过一行文字，只需设置

即可

.slideshow span {
    line-height: 64px /* = the height of the containing div */
}

或者，如果你知道跨度的高度：

.slideshow span {
    display: block;
    position: absolute;
    height: 64px;
    top: 50%;
    margin-top: -32px; /* = height/2 */
}

最后一个选项是使用由单个单元格形成的表来代替div，并使用vertical-align属性。

Answer 2

<强> CSS：

<style>
    div {
        width:300px; height:300px;
        text-align:center;
        display:table-cell; vertical-align:middle;
    }
</style>

<强> HTML：

<div>
    <span>The Span</span>
</div>

Answer 3

是的，这是可能的。

使用CSS属性vertical-align:middle。

如果要在水平中心位置的下方或上方对齐，请使用如下：

vertical-align:5;

或

vertical-align:-5;

是否可以在DIV中垂直居中SPAN？

3 个答案: