在父div的水平中心的位置文本

Question

我想製作一個包含兩個按鈕和一個「logo」的標題。這兩個按鈕應該相對於瀏覽器左右浮動，並且「logo」應該位於絕對水平中心，也是相對於瀏覽器。

這一切都運行良好，直到我意識到徽標位於兩個按鈕之間的中心位置，這兩個按鈕的大小不同，使其偏離中心。

這裏是我的代碼：Clicky

我嘗試了一些絕對定位，但什麼也沒做，可能是因爲我的一部分無知。

#head { 
    position: absolute; 
    left: 50%; 
} 

Answer 1

看起來你試圖用「的text-align：中心'在父容器上進行這項工作。它正在工作，除了它將所有這三個要素集中在一起。你可以在這裏看到，如果你刪除了漂浮物：http://jsfiddle.net/aHP6D/1/。

所以，一個選擇是絕對定位按鈕，從而使它們脫離正常的文檔流程。這意味着剩下的（而不是絕對定位的）唯一的<span>就是你想要的中心。

你可以看到，在這裏工作：

http://jsfiddle.net/aHP6D/2/

Answer 2

爲中心的東西，只是邊距設置爲自動：

#head{ 
    position:relative; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
} 

完全居中：

​​

Answer 3

設置#head的position到absolute和left財產50%將圍繞它的左側。將其margin-left屬性設置爲負半寬將拉回中心。

#head { 
    position: absolute; 
    left: 50%; 
    width: 100px; 
    margin-left: -50px; 
} 

查看http://jsfiddle.net/exs78/舉例。