居中与浮动元素的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

回答

相关问题