是否可以将DAN中的SPAN垂直居中？

这是我的了：是否可以将DAN中的SPAN垂直居中？

<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> s的目前水平居中，但他们也应该垂直居中。这可能吗？

整个想法是在背景图片的顶部（左侧和右侧的引号）上有推荐，但是如果水平方向为和垂直方向为，则不太合适。

我敢肯定，我可以使用padding来获得所需的效果，但由于每个证言会有不同的长度，我认为这不是一个好的方法。

来源

2010-10-02 Matt Untsaiyi

，如果你知道你的跨度的内容绝不会超过一个文本行，只需设置

.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属性。

来源

2010-10-02 12:23:45 mjsarfatti

好主意。我可能只是这样做，但我预计它可能会超过一行（一行不是真的那么多的空间）。 – 2010-10-02 12:27:58

我jsut写了几个更多的选项，请参阅编辑的答案... – mjsarfatti 2010-10-02 12:53:29

我试过了'position：absolute;'选项刚刚起作用，它可以工作（除了它应该是'margin-top：32px'，而不是-32），但是与使用'line-height：64px'相同的问题 - 任何一行它不再居中。我可以在不更换'div'的情况下做最后一个选择吗？我的jQuery插件Cycle需要它。 – 2010-10-02 13:02:08

是的，这是可能的。使用CSS属性vertical-align:middle。

如果要对齐verticaly低于或水平中心位置上方，然后用这样的：

vertical-align:5;

或

vertical-align:-5;

来源

2010-10-02 11:10:05 GitsD

我使用'垂直对齐的尝试：中部;'没有成功。你能告诉我如何在我提供的代码中做到这一点吗？ – 2010-10-02 11:26:38

你可以使用填充分隔。 – GitsD 2010-10-02 11:32:53

我已经提到填充没有意义。 – 2010-10-02 11:37:02

CSS：

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

HTML：

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

来源

2010-10-02 13:04:19

你击败了我与表格单元格显示属性的毫秒数。 – 2010-10-02 13:10:37

IE不支持display：table-cell不幸的是... – mjsarfatti 2010-10-02 13:11:50

它无论如何都不起作用:(我为''.slideshow'添加了'display：table-cell; vertical-align：middle;'和我的内容直接进入我的页面顶部，甚至高于我的导航页面。^ – 2010-10-02 13:16:26

是否可以将DAN中的SPAN垂直居中？

回答

相关问题