html-如何将ul与div的水平对齐?

我正在尝试将<div>放在<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在容器内居中。

Si8 asked 2019-11-08T12:06:17Z
5个解决方案
190 votes

以下是在CSS中将内容水平居中的解决方案列表。 该代码段包括所有这些代码。

display: inline-block
display: inline-block


display: inline-block

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

笔记:

  • 这不是a
  • 浏览器支持:flexbox

display: inline-blocktext-align

通过分配固定宽度并将display: inline-blocktext-align设置为translateY(),可以将块级元素水平居中。

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

笔记:

  • 无需容器👍
  • 要求(最大)居中元素的宽度width

IE9 +:display: inline-blocktext-align

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

.container {
  position: relative;
}

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

笔记:

  • 居中的元素将从文档流中删除。 所有元素将完全忽略居中元素。 👎👎👎
  • 此技术允许使用display: inline-block代替text-aligntranslateY()代替translateX()进行垂直居中。甚至可以将两者结合使用。 👍
  • 浏览器支持:display: inline-block

IE8 +:display: inline-blocktext-align

与第一种解决方案一样,您在左右边距上使用自动值,但不指定宽度。 如果您不需要支持IE7或更低版本,则使用text-aligndisplay: inline-block属性值似乎有点麻烦,尽管这是比较合适的选择。

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

IE8 +:display: inline-blocktext-align

也可以像对待常规文本一样将元素居中。 缺点:您需要为容器和元素本身分配值。

.container {
  text-align: center;
}

.container ul {
  display: inline-block;

  /* One most likely needs to realign flow content */
  text-align: initial;
}

笔记:

  • 不需要指定(最大)宽度👍
  • 使流内容与中心对齐(可能会产生有害的副作用)👎
  • a动态数量的菜单项效果很好(例如,在您不知道单个项目占用的宽度的情况下)👍
kleinfreund answered 2019-11-08T12:09:12Z
17 votes

使您的UL auto的左右边距并为其指定宽度:

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

编辑:如kleinfreund所建议,您还可以将容器居中对齐并为ul提供内联块显示,但随后还必须为LI提供左浮点或内联显示。

#headermenu { 
    text-align: center;
}
#headermenu ul { 
    display: inline-block;
}
#headermenu ul li {
    float: left; /* or display: inline; */
}
Derek Henderson answered 2019-11-08T12:09:47Z
3 votes
ul {
width: 90%; 
    list-style-type:none;
    margin:auto;
    padding:0;
    position:relative;
    left:5%;
}
user5180178 answered 2019-11-08T12:10:06Z
1 votes

您可以检查这解决了您的问题...

    #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/]

Gaurang P answered 2019-11-08T12:10:39Z
0 votes

您可以使用CSS Flexbox轻松快速地将ul居中。

#headermenu {
    display: flex;
    justify-content: center; /* center ul horizontally */
    align-items: center; /* center ul vertically (if necessary) */ 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
}
Michael_B answered 2019-11-08T12:11:05Z
translate from https://stackoverflow.com:/questions/16946284/how-to-horizontally-align-ul-to-center-of-div