我該如何在一個div中垂直居中跨度？

我真的很想這樣，並已嘗試了幾個小時，我有它在div中水平居中，但只需要讓它垂直居中現在..我該如何在一個div中垂直居中跨度？

這是我的CSS代碼水平居中在一個DIV。

.titl { 

    font-family:serif; 

    text-align:center; 

    font-size:35px; 
    font-weight: bolder; 

    color:#FFFFFF; 

    padding-top:1cm; 
     text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */ 
    -moz-text-shadow: 0 0 2px #000; 
    -webkit-text-shadow: 0 0 2px #000; 

    }

這是格碼的HTML：

<div class="wrapper"> 

<div id="Production" class="orange" style="cursor:wait"> 

    <div id="incidentsList"> 

     <span class="titl">Production</span> 


    </div> 
</div> 





<div id="Infrastructure" class="red" style="cursor:wait"> 

    <div id="requestsList"> 
<span class="titl">Infrastructure</span> 

    </div> 
</div> 





<div id="QA" class="green" style="cursor:wait"> 

    <div id="approvalsList"> 
<span class="titl">QA</span> 

    </div> 


</div> 

</div>

爲橙色和紅色等CSS代碼是下面：

.orange { 
    background-image: url('../images/nFinal.jpg'); 
    background-position: bottom; 
    background-repeat: no-repeat; 
    height: 120px; 
    width: 224px; 
    position: relative; 
    float: left; 
    margin-top: 2px; 
    TEXT-ALIGN: center; 
}

編輯編輯編輯編輯編輯編輯編輯編輯編輯編輯編輯編輯* * ** * ** * ** * ** * ** * @丹我想你說的什麼，但它沒有工作。 HTML：

<div id="Productiond"> 

      <span class="titl">text</span> 


    </div>

CSS：

#Productiond {height: 50px} 




.titl { 

    font-family:serif; 

    text-align:center; 

    font-size:35px; 
    font-weight: bolder; 

    color:#FFFFFF; 

    padding-top:1cm; 
     text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */ 
    -moz-text-shadow: 0 0 2px #000; 
    -webkit-text-shadow: 0 0 2px #000; 
    height: 50px; 
    line-height: 50px; 
    }

來源

2011-08-31 Bulvak

不要聽起來很暴躁，但這已被問了幾百次 - 查看http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/瞭解幾種方法。 – Blazemonger

我嘗試了谷歌和一些線程，我讀人誤解和幫助水平對齊和別人說這是不可能的。我知道在div中居中放置一個div，但是甚至無法在div上找到垂直和水平居中放置的跨度。PS：您發佈的鏈接是將div對齊爲水平和垂直。然而，它並沒有談及在一個div裏面集中一個div – Bulvak

下面是我的例子的一個工作示例：http://jsfiddle.net/2qnHu/ – Dan

你可以嘗試設置.titl跨度的高度符合該封閉div標籤的高度。然後將.titl範圍的line-height設置爲與之匹配。這將取決於你正在使用它在環境中工作

嘗試此一個例子：

HTML：

<div id='Request'> 
<span class='titl'>Test Message</span> 
</div>

CSS：

#Request {height: 50px} 
.titl {height: 50px; line-height: 50px}

這則顯示標題「測試消息」在包含的Div內垂直居中。

來源

2011-08-31 14:36:33 Dan

這是一個可用的JS小提琴：http://jsfiddle.net/2qnHu/ – Dan

它並沒有爲我工作不知道爲什麼，但我得到它的工作，通過添加2
....因爲你的例子在小提琴中工作，並可能有助於別人，我認爲它被認爲是一個答案:) – Bulvak

首先，我建議從.titl取出padding，height和line-height聲明。然後，我會在.titl上指定vertical-align: middle。 vertical-align用於內聯元素，span是內聯元素。因此，您可以使用vertical-align。

這就是說，我無法在JSFiddle和JSBin上嘗試它時複製您的問題。如果這不能解決您的問題，我會建議發佈一個或另一個鏈接。

來源

2011-08-31 15:19:42

我該如何在一個div中垂直居中跨度？

回答

相關問題