如何將內容集中在這個div中？

這裏是一個鏈接：http://jsfiddle.net/zCXMv/18/如何將內容集中在這個div中？

我想不出如何得到這個工作。請幫忙。

HTML：

<div id="button" > 
    <a class="button1 active" rel="1"></a> 
    <a class="button2" rel="2"></a> 
    <a class="button3" rel="3"></a> 
    <a class="button4" rel="4"></a> 
</div>

CSS：

.button1, 
.button2, 
.button3, 
.button4 { 
    background:#999; 
    padding:6px; 
    display:block; 
    float:left; 
    margin-right:5px; 
} 

#button { 
    width: 50%; 
    border-width: 1px; 
    border-style: solid; 
    height: 30px; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2014-09-21 people

http://jsfiddle.net/zCXMv/19/

我所做的按鈕display: inline-block，去掉了float s並將text-align: center添加到父項。

.button1, 
 
.button2, 
 
.button3, 
 
.button4 
 
{ 
 
    background:#999; 
 
    padding:6px; 
 
    display: inline-block; // Changed from "block" 
 
    margin-right:5px; 
 
    // Removed floats  
 
} 
 

 
#button 
 
{ 
 
    width: 50%; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    height: 30px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; // Added central alignment to content 
 
}

<div id="button" > 
 
    <a class="button1 active" rel="1"></a> 
 
    <a class="button2" rel="2"></a> 
 
    <a class="button3" rel="3"></a> 
 
    <a class="button4" rel="4"></a> 
 
</div>

來源

2014-09-21 16:21:19 Luke

謝謝你！這個工程！ – people 2014-09-21 16:25:38

如果在工作，請批准它作爲答案。 – 2014-09-21 16:27:39

不用擔心！@ Flopet17，謝謝！我同意;） – Luke 2014-09-21 16:29:54

試試這個CSS

.button1, 
.button2, 
.button3, 
.button4 { 
    background:#999; 
    padding:6px; 
    display:block; 
    float:left; 
    margin-right:5px; 
} 

#button { 
    width: 50%; 
    border-width: 1px; 
    border-style: solid; 
    height: 30px; 
    margin: 0px auto; 
}

來源

2014-09-21 16:20:36 Carca

它沒有工作。 :( – people 2014-09-21 16:22:07

嘗試這種情況：

#button a{ 
display:block; 
margin:auto;}

來源

2014-09-21 16:21:35

它沒有工作。 :( – people 2014-09-21 16:23:13

刪除「顯示：塊」和「浮動：左」上的按鈕，並添加「文本對齊：中心」來#button定義。

顯示「inline-block」在所有的瀏覽器中都不支持，所以我建議不要使用這個，除非你絕對必須這樣做。

來源

2014-09-21 16:22:52 Seth

嘗試this.It可能工作：

#button a{display:block;margin:0 auto !important;text-align:center !important;}

來源

2014-09-21 17:15:08

請提供解釋，以便更好地理解。這個塊代碼是不足以得到（至少對於begginers） – 2014-09-21 19:55:38

如何將內容集中在這個div中？

回答

相關問題