如何在CSS

定義專區內適應數字我有以下的div結構如何在CSS

<div class="channel_name"> 
    <div class="channel_number">2299</div> 
</div>

的CSS的定義是這樣的

.channel_name { 
     background: url("../img/desktop/logo_bg.png") no-repeat scroll 50% 50% transparent; 
     display: table-cell; 
     padding: 3px; 
     text-align: center; 
     vertical-align: middle; 
     width: 45px; 
    } 

    .channel_number { 
     background-color: #FFFFFF; 
     color: #FF0000; 
     font-family: Arial,Helvetica,sans-serif; 
     font-size: 18px; 
     font-style: normal; 
     font-weight: bold; 
     height: 21px; 
     margin: auto; 
     width: 33px; 
    }

的問題是，當有四位數字是顯示在channel_number class中的數字不符合div。如果我們更改字體大小，則數字適合div，但數字不會到達div的中心。相反，它會轉到div的頂部位置。現在由於字體大小，數字會根據需要進入div的中間位置，但是對於四位數字，它不適合div。請幫我在div中間正確顯示四位數字。

來源

2011-12-10 user850234

增加line-height。垂直對齊基於一行文本的高度。當您減小字體大小時，線條高度也會減小，除非您已明確設置線條高度。

您可能還需要將其放置在內聯元素中，例如跨度，並設置vertical-align: middle。

來源

2011-12-10 06:32:41 gilly3

更改channel_number css。

.channel_number { 
    background-color: #FFFFFF; 
    color: #FF0000; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 18px; 
    font-style: normal; 
    font-weight: bold; 
    margin: auto; 
}

http://jsfiddle.net/V2tdL/5/

來源

2011-12-10 05:36:39

填充增加了空間，但不能解決問題。我想保持相同的空間，但要符合其中的數字。類channel_name具有特定大小的背景圖像，並且下一個div位於其中。 channel_number div應該適合在外部div – user850234

我已更正解決方案。請檢查一下。你是在找什麼？ –

溢出：隱藏;？

而且，我看不出有任何問題：http://tinkerbin.com/ALhjdvPH

來源

2011-12-10 05:36:45

溢出：隱藏;隱藏最後一位數字。問題是我在我的項目中有一個其他css定義的項目中使用它。單獨它工作正常，但是當一切都集成了這個特殊的div是有效的 – user850234

回答

相關問題