CSS文本

我怎麼能在下面的文本居中（對不起，我是新來的CSS）：CSS文本

alt text

CSS：

suggestion_active { 
    background-image: url(../images/suggestion_active.jpg); 
    background-repeat:no-repeat; 
    position:inherit; 
    float:inherit; 
    width: 100px; 
    height: 36px; 
} 

suggestion_active_text { 
    possition: absolute; 
    font-family: "Lucida Grande", Tahoma; 
    font-size: 12px; 
    font-weight: lighter; 
    text-align: center; 
    color:#000; 
    vertical-align: middle; 
    padding:0px; 
}

HTML：

<suggestion_active><suggestion_active_text>1</suggestion_active_text></suggestion_active>

如果您告訴我如何做到這一點的最佳做法，這也將是不錯的:)

來源

2010-11-21 Lukas Šalkauskas

Harmen的答覆工作，但你在製作自己的html標籤嗎？ – 2010-11-21 20:01:47

設置text-align: center;水平居中文本，並設置line-height: [heightofbox];垂直居中文本。

這裏是

需要注意的是，如果您正在使用無效的HTML元素的工作，你需要將它們設置爲塊元素的簡單example。所以，這應該做的伎倆：

customEl { 
    display: block; 
    ... 
}

來源

2010-11-21 20:01:36 Harmen

@harmeen，我打字速度慢，格式化... :)我的答案也應該正確。 – kobe 2010-11-21 20:05:42

不水平對齊（至少不在FF 3.6） - 他已經有一個'文本對齊：中心;'在那裏... – 2010-11-21 20:06:46

@intially我沒有做格式對我的div代碼，所以它來了作爲輸出中的1，所以我必須編輯那個agian。 – kobe 2010-11-21 20:07:32

您可以刪除suggestion_active_text ..

有一個DIV與背景圖像。該div裏面做這樣的

<div style="text-align:center"> 1 </div>

給出上述完蛋了

來源

2010-11-21 20:03:40 kobe

@Lukas，文本對齊中心在文本上工作，現在你可以爲這個div賦予空白圖像...所以不需要有兩個。 – kobe 2010-11-21 20:04:57

添加以下到這兩個標籤，它應該做的伎倆背景圖片：

display: block; 
width:100px;

來源

2010-11-21 20:05:01

恩，不是。 – Marko 2010-11-21 20:05:30

嗯......我在這裏測試這個，就像真正的html文件一樣。到目前爲止，與OPs代碼結合在一起，它是唯一可行的...所以是的，真的... – 2010-11-21 20:08:03

還是，不是真的。 'vertical-align'在所有瀏覽器中都不起作用。由於這只是關於文本，因此設置'line-height'會更優雅。 – Harmen 2010-11-21 20:16:14

回答

相關問題