代码之家 › 专栏 › 技术社区 › philfreo

如何将未知宽度的无序列表水平居中?

centering css html

philfreo · 技术社区 · 16 年前

在列表中表示的页脚中通常有一组链接,例如:

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

我希望div#footer中的所有内容都水平居中。如果是一段话,你会很容易地说: p { text-align: center; } . 或者如果我知道这条路的宽度 <ul> 我只能说 #footer ul { width: 400px; margin: 0 auto; }

但是,如何在不设置固定宽度的情况下将无序列表项居中 <

编辑:澄清-列表项应彼此相邻,而不是在下面。

6 回复 | 直到 16 年前

164

philfreo 16 年前

解决方案,如果您的列表项可以 display: inline 这很容易:

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

但是,很多时候你必须使用 display:block 在你的 <li> s在这种情况下,以下CSS将起作用:

#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }

Andro Selva Anand Wadhwani 13 年前

使用下面的css解决您的问题

#footer{ text-align:center; height:58px;}
#footer ul {  font-size:11px;}
#footer ul li {display:inline-block;}

注 float:left 在李。这将使您的li向左对齐。

Andrey 13 年前

还有一个解决方案:

#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }

cletus 16 年前

这取决于您的意思是列表项位于前一项的下方还是前一项的右侧,即:

Home
About
Contact

Home | About | Contact

第一个简单的方法是:

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }

Martin Dale Lyness 16 年前

尝试将列表包装到一个div中,并将inline属性而不是列表赋予该div。

Jacky Nguyen 13 年前

philfreo的答案很好,它可以完美地工作(跨浏览器,使用IE7+)。只需为li中的锚标签添加我的经验。

#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */

#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }

推荐文章

SNYDERHAUS · 不影响居中HTML元素的伪元素

8 年前

Barton Lewis · 使用内联stlyes在html电子邮件中水平居中td

8 年前

Lavandysh · 调整大小后如何使窗体居中于屏幕中间

8 年前

Dr. Fabian Habersack · 编写/应用“减去均值”函数来标准化回归参数

8 年前

user8385857 · 居中CSS幻灯片

8 年前

M. GR. · 使用display flex[复制]将多个项目居中

8 年前

Detoxical · 我如何制作一个带有圆形边框的div,并使其中的fa图标居中?

9 年前

user7259161 · 引导响应网格上的中心DIV

9 年前

y_nk · 水平可滚动列表完全居中,具有动态宽度项

9 年前

Tad · 使用GridLayoutManager时,Android RecyclerView单元格始终左对齐

10 年前