如何水平alignment到div的中心？

我正在尝试将一个<ul>放在一个<div> 。 我尝试了以下

 text-align: center; 

和

 left: 50%; 

这不起作用。

CSS ：

 .container { clear: both; width: 800px; height: 70px; margin-bottom: 10px; text-align: center; } .container ul { padding: 0 0 0 20px; margin: 0; list-style: none; } .container ul li { margin: 0; padding: 0; } 

我希望ul在容器中居中。

Answer 1

IE7 +： max-width: 660px和margin: auto

您可以通过将固定宽度和右侧边距以及左侧设置为自动来对块级元素进行居中。

 .container ul { /* for IE below version 7 use `width` instead of `max-width` */ max-width: 660px; margin-right: auto; } 

备注 ：

• 没有容器需要👍
• 要求元素的宽度或最大宽度为中心以知道👎

---

IE8 +： display: inline-block和text-align: center

像使用常规文本一样将元素居中也是可能的。 下行：您需要为容器和元素本身分配值。

 .container { text-align: center; } .container ul { display: inline-block; /* One most likely needs to realign flow content */ text-align: initial; } 

笔记：

• 不需要指定特定的宽度👍
• 需要容器👎
• 将stream动内容与中心alignment（可能有害的副作用）👎
• 使用dynamic数量的菜单项（即在无法知道单个项目将占用的宽度的情况下）工作得很好👍

---

IE8 +： display: table和margin: auto

就像第一个解决scheme一样，您可以使用右侧和左侧边距的自动值，但不要指定宽度。 如果你不需要支持IE7及以下版本，这是更好的select，尽pipe使用table属性值来display它感觉很不好。

 .container ul { display: table; margin-right: auto; margin-left: auto; } 

---

IE9 +： transform: translatex(-50%)和left: 50%

这与使用绝对定位和负边距的古怪定位方法类似。

 .container { position: relative; } .container ul { position: absolute; left: 50%; transform: translatex(-50%); } 

备注 ：

• 就像使用绝对定位时一样，居中的元素将从文档stream中移除。 所有元素只会关心容器，而忽略中心元素本身。 👎👎👎
• 需要容器👎
• 这种技术通过使用top而不是left来很容易地进行垂直居中， translateY()代替translateX() 。 结合top和left的translate()作品（注意缺失的X和Y ）👍
• 请检查caniuse.com是否支持浏览器，因为您可能需要在此处为​​Android和/或iOS原生浏览器（和IE9）添加前缀。

---

尖端： display: flex

 .container { display: flex; justify-content: center; } 

备注 ：

• 这不是黑客</s>
• 需要一个容器👎
• 浏览器支持相当不错，但有一些明显的漏洞，尤其是Internet Explorer到版本11和一些较旧的Android和Safari（macOS和iOS）版本

---

最后，总结了上述所有解决scheme的演示 。

Answer 2

使您的UL自动的左右页边距分配一个宽度：

 #headermenu ul { margin: 0 auto; width: 620px; } 

编辑：正如kleinfreund已经build议，你也可以居中alignment容器，并给出一个内联块显示，但你也必须给LI或者左浮动或内联显示。

 #headermenu { text-align: center; } #headermenu ul { display: inline-block; } #headermenu ul li { float: left; /* or display: inline; */ } 

Answer 3

 ul { width: 90%; list-style-type:none; margin:auto; padding:0; position:relative; left:5%; } 

Answer 4

你可以检查这个解决你的问题…

  #headermenu ul{ text-align: center; } #headermenu li { list-style-type: none; display: inline-block; } #headermenu ul li a{ float: left; } 

http://jsfiddle.net/thirtydot/VCZgW/

Answer 5

您可以快速轻松地将CSS与Flexboxalignment 。

 #headermenu { display: flex; justify-content: center; /* center ul horizontally */ align-items: center; /* center ul vertically (if necessary) */ width: 800px; height: 70px; margin-bottom: 10px; }