css li居中

CSS `li` 居中基础概念

li 是 HTML 中列表项的标签，通常用于无序列表（ul）和有序列表（ol）。CSS 是用于描述 HTML 或 XML（包括如 SVG、MathML 等各种 XML方言）文档样式的样式表语言。

类型

水平居中：使 li 元素在水平方向上居中。
垂直居中：使 li 元素在垂直方向上居中。
水平和垂直居中：同时使 li 元素在水平和垂直方向上居中。

应用场景

导航栏：在网站的导航栏中，通常需要将列表项居中显示。
列表展示：在展示列表内容时，为了美观和易读性，通常会将列表项居中。

示例代码

水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Centering</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
            text-align: center;
        }
        li {
            display: inline-block;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Centering</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        li {
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

水平和垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal and Vertical Centering</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        li {
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

常见问题及解决方法

问题：为什么 `li` 元素没有居中？

原因：

CSS 选择器错误：可能没有正确选择 li 元素。
CSS 属性错误：可能使用了错误的 CSS 属性或值。
HTML 结构问题：可能 ul 或 li 元素的结构不正确。

解决方法：

检查 CSS 选择器是否正确。
确保使用了正确的 CSS 属性和值。
检查 HTML 结构是否正确。

参考链接

通过以上方法，可以有效地解决 li 元素居中的问题，并确保页面布局的美观和易读性。

页面内容是否对你有帮助？

有帮助

没帮助

从CSS a <li>居中

、、、

我想要居中显示一个带有<li>标记的菜单，并且我有两个按钮。background-color:#f5f5f5;} margin-left:15px;}

浏览 4提问于2017-08-28得票数 0

3回答

CSS‘如何将导航栏与图像一起居中？

、

我目前正在尝试将导航栏与徽标一起居中。所有的东西都恰到好处，标志在Products和Services之间。我刚刚开始对CSS，有非常基本的知识。另外，有没有人可以帮我居中？-我需要导航栏在页面居中运行。如你所见，我的没有居中。<head> <title>test</title> <link rel="stylesheet" hre

浏览 53提问于2019-04-28得票数 0

回答已采纳

8回答

使文本在圆形<li>中居中

我有这个：<li>+</li>，我试着将文本居中。对于水平居中，我使用line-height。如何使用CSS进行垂直居中？这是一个演示：

浏览 1提问于2011-12-03得票数 0

回答已采纳

2回答

使用display:inline用于居中菜单与display:block

、、、

假设您有一个水平的、图形化的导航菜单，其中每个菜单项的宽度都是可变的(由<li>元素的填充而不是宽度控制)。这意味着你不能真正知道ul的宽度(为了居中)，因为文本在不同的浏览器中有不同的大小。但是有人刚刚告诉我，我可以使用display: inline，它工作得很好，没有使用浮动，而且总是居中？有人听说过这个吗？他是个新手，无法完全解释，所以我很好奇你们是怎么想的。他说他认为文本对齐:居中。我看不出这是如何在菜单上工作的..哪一个不是文本？

浏览 2提问于2012-02-12得票数 1

回答已采纳

7回答

当存在垂直导航栏/侧边栏时，我如何对文本进行居中？

、

我的网站左边有一个垂直导航栏，所以当我将文本居中时，它是居中的，而不是以绿色部分为中心。 background-color:#27C0FD;}<link rel="stylesheet" type="text/css" href="css.css"> <body bgcolor="#81F781">

浏览 9提问于2016-03-16得票数 2

回答已采纳

2回答

使页脚导航链接水平居中

、、、、

浏览 2提问于2013-11-19得票数 1

回答已采纳

1回答

使用UL、LI呈现的居中菜单

给出一个由带有HTML标签UL和LI的Wordpress主题"Twenty“创建的菜单，我们应该如何将LI项居中。当显示变窄并且菜单占用两行时，客户端希望使各个项目居中。拆分行菜单，尚未居中适用于#access UL的CSS font-size: 13px; margin: 0px 0px 0px -0.8125em;

浏览 3提问于2013-04-24得票数 0

4回答

需要在网页的中心居中显示列表

、、

我需要在一个html页面创建一个列表，并使用CSS将其居中。小块列表应该在中心，所有的实心项目符号和文本左对齐，但块本身应该仍然在中心。

浏览 1提问于2012-02-23得票数 2

回答已采纳

1回答

将Glyphicon堆叠并居中引导到list item.Stack中的文本上方，将Bootstrap Glyphicon放在列表项中的文本上方

、、

我希望在垂直和水平居中，然后堆叠在列表项目文本上方的字形图标。如何为此创建css3？<nav> <li><span class="glyphicon glyphicon-globe"></span> <spanclass="

浏览 0提问于2015-06-30得票数 0

2回答

如何使用css和html 5将菜单栏居中对齐？

、

我正在尝试将菜单的文本居中对齐。我试着修改css，搜索互联网和我的书，但是stilL不能解决这个问题。请帮助我的css和html代码如下。<title>IT Career Center</title><link rel="stylesheet" href="stylesheet.cssclass="pureCssMenui"&

浏览 2提问于2015-04-22得票数 0

1回答

使标题在<a>父标记内的img标记上居中

、、、

我想在<a></a>标记中包含的img标记上居中显示标题。这是我的HTML：<body> <li> <p><img></p> </ul></html&

浏览 1提问于2011-04-27得票数 1

回答已采纳

2回答

如何在价格表中垂直对齐

、

我们希望在垂直对齐的中心显示li元素。有什么想法吗？我的css是 .pricing-table ul{border-radius:3px;width:160px;text-align:center;float:left;background-color:>Shimla</li><li>Manali</li><li>Dharamshala, Delhi, Manali, Shimla</li<

浏览 3提问于2014-03-21得票数 1

2回答

在无序列表中以列表项为中心

、

导航栏由一个6<li>的<li>组成，其中5个显示在一个全尺寸的屏幕上。当屏幕缩小到移动大小时，导航图标就会出现，其他列表项目就会消失。出于某种原因，我无法让肚脐图标(汉堡包图标)出现在屏幕的中央。/*Reponsive CSS*/ display: none; #navbar><a href="/">Item 1<

浏览 0提问于2016-06-12得票数 0

回答已采纳

2回答

使无序列表居中

、、

我正在尝试使用CSS将一个无序列表居中，而不是项目符号。不管我试过什么，列表都是居中的，包括要点。即使您看不到项目符号，但当我尝试将列表居中时，它们仍然包含在列表中。 margin: auto; border: 2px red solid;} padding: 0 15px;

浏览 23提问于2016-08-09得票数 1

回答已采纳

3回答

是否居中导航列表并删除默认间距？

、、、

我有一个居中的导航列表，但是有一些我不想要的默认间距。同样在小提琴的例子中你看不到它，但在我这一端的导航列表并不是真正居中的css等。也许有人可以看看代码，看看它是否真的居中的导航列表。<header> <ul> <li><a href="#"><span>Home</span></a></li>

浏览 0提问于2015-03-08得票数 0

1回答

显示居中:表格-行UL/LI列表

、、、、

include("templates/install_settings.html");install_db.html模板： <link href="templates/css/style.css" rel="stylesheet" type="text/css" /><body style="backgro

浏览 3提问于2011-07-25得票数 1

回答已采纳

3回答

水平和垂直居中的css技巧

我的.cent类是用于<li>元素的。我想让<li>的文本水平和垂直居中。text-align:center;负责水平居中，但垂直居中不起作用。CSS的诀窍是什么？

浏览 5提问于2010-12-16得票数 5

回答已采纳

2回答

li中跨度的居中背景图像，文本居中并在底部垂直对齐

、、、

 我只想使用CSS而不是表格来重新创建它<ul><span class="icon-class icon-name"></span></li></ul> icon-class设置图像、显

浏览 1提问于2011-10-14得票数 1

回答已采纳

3回答

在li的中间对齐标签

、

我的<a>标签包装在<li>中，我为<li>标签设置了特定的宽度，但无法在<li>中对<a>标记进行居中。任何帮助都是非常感谢的。

浏览 3提问于2014-07-04得票数 0

回答已采纳

2回答

如何使导航菜单居中？

、、

我使用以下代码来创建布局，问题是，导航菜单不会居中，文本居中，但导航栏的其余部分不会居中。http://www.w3.org/1999/xhtml"> <title>Test</title> <link rel="stylesheet" type="text/css" href="style.css"

浏览 0提问于2011-08-21得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css li居中

CSS li 居中基础概念

相关优势

类型

应用场景

示例代码

水平居中

垂直居中

水平和垂直居中

常见问题及解决方法

问题：为什么 li 元素没有居中？

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

CSS `li` 居中基础概念

问题：为什么 `li` 元素没有居中？