在div内水平居中的正确方法是什么？

我对HTML/CSS比较新，所以请随时纠正我（可能）犯的任何其他错误。这是我的HTML和CSS：http://jsfiddle.net/luxurymode/PrjJ3/3/在div内水平居中的正确方法是什么？

我想要做的就是在该“navbar”中水平居中UL。什么是正确的方法呢？

编辑：我不小心张贴错误的小提琴。现在是正确的......

来源

2012-02-27 LuxuryMode

有很多方法可以达到这个效果。 “适当”和“正确”对你来说意味着什么？ – 2012-02-27 21:18:35

让你的li元素在同一行中的更好的方法是将它们添加到display：inline，remove float：left，并从链接中移除display：block。 – abresas 2012-02-27 21:32:52

Thanks @abresas！ – LuxuryMode 2012-02-27 21:34:51

正确的方法是

#topbar ul { 
    width: /* exact width of the ul */; 
    margin: 0 auto; 
}

DEMO

另一种方式是

#topbar { 
    text-align: center; 
} 

#topbar ul { 
    display: inline-block;  
}

但inline-block不是100％×浏览器证明。

DEMO

来源

2012-02-27 21:18:50 paislee

如果它们的宽度可以是动态的呢？我知道很多情况下，我不能在这样的宽度或菜单中进行硬编码。 – 2012-02-27 21:24:52

谢谢！垂直方向如何？一旦我添加了边距0自动，垂直居中似乎已消失。 http://jsfiddle.net/luxurymode/PrjJ3/9/ – LuxuryMode 2012-02-27 21:25:13

竖起大拇指提供双方paislee。 – 2012-02-27 21:29:35

一个简单的方法将是给列表中的宽度和边距设置为0汽车：

#topbar ul { 
    list-style-type: none; 
    margin:0 auto; 
    width:300px 
}

来源

2012-02-27 21:21:24 j08691

如果你将永远知道你的UL值，然后使用第一对夫妇答案中的例子。如果你不知道宽度是多少，你必须使用稍微不同的方法。将您的礼品卡上的float:left;更改为display:inline;，然后将text-align:center;添加到您的卡里。

来源

2012-02-27 21:28:05

第一：对于浏览器兼容性（IE & FF）与内联块，使用：

display:-moz-inline-stack; 
display:inline-block; 
zoom:1; 
*display:inline;

所以在#nav里，除去浮动：左，使其：

#nav li { 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
    border-right: 1px solid #fff; 
    box-shadow: 1px 0 0 rgba(255, 255,255, 0.1); 
}

然后以您为中心导航

#nav { 
    padding: .5em; 
    height: 55px; 
    width: 650px; 
    background-color: #325A8C; 
    text-align: center; 

}

来源

2012-02-27 21:39:12

在div内水平居中的正确方法是什么？

回答

相关问题