居中與浮動元素的div

我有一個包含浮動鏈接的div。我將「width：auto」的屬性和值應用於div。但是，由於某些原因，div佔據了整條線，而不是僅僅假設浮動元素的總寬度。我究竟做錯了什麼？居中與浮動元素的div

CSS：

#user-links { 
margin-right: auto; 
margin-left: auto; 
height: auto; 
width: auto; 
padding: 0px 0px 0px 0px; 
overflow: auto; 
} 

.user-link { 
float: left; 
margin: 0px 0px 0px 0px; 
padding: 0px 10px 0px 10px; 
} 

.user-link a { 
text-decoration: none; 
font-family: calibri; 
font-size: 16px; 
color: #fff; 
} 

.user-link a:hover { 
text-decoration: underline; 
}

來源

2013-04-10 Matt Morris

是否有一個理由，爲什麼你正在使用div的，而不是無序的升北京時間？使用無序列表，您可以使用display：inline-block然後text-align：center到LI中的中心LI – Michael 2013-04-10 16:39:55

嘗試：

width: 960px;

人們大多使用網格系統採用960像素作爲網站的規模，特別是在Photoshop中，因爲它幾乎適合任何尺寸的顯示器。任何其他數字也是可能的。

由於margin-left和margin-right設置爲auto，與fixed width的div內的元素將位於中心。

jsfiddle使用width: 500px;的示例只是爲了向您顯示差異。

來源

2013-04-10 16:41:10 herinkc

沒有「安全」大小。新設備一直以不同的分辨率出現，你不能指望它們全都有960像素。 – cimmanon 2013-04-10 17:00:30

那麼這是block-level elements的默認行爲 - 它們佔用100％的寬度，除非您指定一個寬度，而不考慮其後代的顯示值。您也不能使用指定寬度的自動左右邊距而不指定。

給出一個明確的寬度#user-links

http://jsfiddle.net/X9anU/6/

來源

2013-04-10 16:41:28 Adrift

只是因爲你設置的左/右頁邊距auto並不意味着你的div就會崩潰。

浮動的孩子也不會導致它在橫軸上崩潰。

如果您嘗試將鏈接居中，則可以將鏈接設置爲display: inline-block;，刪除浮動，並將text-align: center;應用於#user-links格。

像這樣：

#user-links { 
    margin-right: auto; 
    margin-left: auto; 
    height: auto; 
    width: auto; 
    padding: 0px 0px 0px 0px; 
    overflow: auto; 
    text-align: center; 
} 
.user-link { 
    display: inline-block; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 10px 0px 10px; 
}

工作實施例：http://jsfiddle.net/X9anU/13/

來源

2013-04-10 16:44:00 Axel

甲<div>是默認塊級元件，其將跨越父的寬度，除非另有規定，在這種情況下，寬度：自動假設父容器的寬度。

如果您希望#user-links元素只涵蓋內容的寬度和居中內它的容器，你需要指定display: table到#user-links聲明在你的CSS：

#user-links { 
    display: table; 
    margin: 0 auto; 
}

更新小提琴：http://jsfiddle.net/X9anU/16/

下面是支持display: table瀏覽器的列表：http://caniuse.com/css-table

來源

2013-04-10 16:46:18 sbeliv01

居中與浮動元素的div

回答

相關問題