是否可以將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垂直居中？

回答

相關問題