塊元素，水平居中對齊和最小寬度可能

我想要讓這個塊元素在中間水平對齊，但同時我希望寬度是內部內容的最小可能。但我不認爲這是可能的，或者我不能做我自己......塊元素，水平居中對齊和最小寬度可能

a#button-link { 
    background: url("images/button-link.png") no-repeat scroll center left; 
    margin: 12px auto 0 auto; 
    display: block; 
    width: 125px; 
    height: 32px; 
    line-height: 32px; 
    padding-left: 35px; 
    font-weight: bold; 
}

這是我當前的代碼......這背後的想法是，該標記文本可能會稍微根據用戶的語言以及同一句子對特定用戶的語言有多少字符而變大或變小。我無法控制，但我仍然希望將此元素水平對齊到中心位置。

這是可能的CSS？

來源

2010-04-01 Ricardo Amaral

使用display:table。

更新

<!DOCTYPE html> 
<html lang="en"> 
<meta charset="UTF-8"> 
<title>display:table</title> 
<style> 
div 
    { 
     display:   table; 
     border-collapse: collapse; 
     border:    1px solid #950; 
     margin:    100px auto; 
    } 
* html div 
    { /* IE 6. If anybody finds a good solution for IE 7: Tell me! */ 
     width:    .1em; 
    } 
* + html div 
    { /* IE 7 Hack. Not perfect. */ 
     float:    left; 
     margin:    100px auto 100px 45%; 
    } 
</style> 

<div>Some Text.</div>

Live Demo

來源

2010-04-01 22:14:12 fuxia

這不會在IE（6？）的工作，雖然，會嗎？ – 2010-04-01 22:16:01

即使它有效，它可以做到嗎？我的意思是，我使用div和CSS，所以我避免表格，現在我將display屬性設置爲表格？有點諷刺... – 2010-04-01 22:18:28

剛剛檢查過，它不適用於IE6，但我不在乎。 IE9已經開始工作，這是3個新版本，有時間更新人員。 – 2010-04-01 22:29:02

塊元素，水平居中對齊和最小寬度可能

回答

相關問題