HTML中的li标签可以通过使用CSS使其中文字垂直居中，方法包括使用line-height、flexbox、table-cell等。 在这篇文章中，我们将详细讨论这些方法，并提供具体的代码示例和实际应用场景。
一、LINE-HEIGHT方法
使用line-height是最简单的方式之一，通过将行高设置为与li元素的高度相同，可以实现文字的垂直居中。
1、基础示例
首先，给li元素设置一个固定的高度，然后将line-height属性设置为相同的值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line-Height Method</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
height: 50px;
line-height: 50px;
border: 1px solid #000;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
在这个示例中，我们设置了li元素的高度为50px，同时将line-height也设置为50px，从而使文字在垂直方向上居中。
2、响应式设计
在响应式设计中，我们可能不希望使用固定高度，此时可以使用百分比来设置line-height：
li {
height: 10vh; /* 高度设置为视口高度的10% */
line-height: 10vh; /* 行高设置为视口高度的10% */
}
这种方法在某些情况下可能并不完美，尤其是在文本行数较多时。
二、FLEXBOX方法
Flexbox是另一种非常强大的布局工具，可以轻松实现垂直居中。
1、基础示例
使用Flexbox布局，首先将ul元素设置为flex容器，然后将li元素的align-items属性设置为center：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Method</title>
<style>
ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 0;
}
li {
display: flex;
align-items: center;
border: 1px solid #000;
height: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
通过将li元素的display属性设置为flex，并将align-items设置为center，可以确保li元素内的文字在垂直方向上居中。
2、复杂布局
Flexbox不仅限于简单的垂直居中，它还可以处理更加复杂的布局。例如，当我们需要在li元素中同时水平和垂直居中时，可以使用以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Flexbox Layout</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #000;
height: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
在这个示例中，我们同时使用了align-items和justify-content属性，实现了文字在li元素内的水平和垂直居中。
三、TABLE-CELL方法
使用display: table-cell也是一种常见的垂直居中方法，尤其是在处理未知高度的元素时非常有效。
1、基础示例
将li元素设置为display: table-cell，并使用vertical-align: middle来实现垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table-Cell Method</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
display: table-cell;
vertical-align: middle;
border: 1px solid #000;
height: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
通过将li元素的display属性设置为table-cell，并使用vertical-align: middle属性，文字可以在垂直方向上居中。
2、结合其他布局
这种方法也可以结合其他布局方式使用，例如在一个复杂的布局中，将某些特定的元素设置为table-cell：
.container {
display: flex;
}
.item {
display: table-cell;
vertical-align: middle;
}
这种方法的灵活性较高，但在某些浏览器中可能会存在兼容性问题。
四、GRID布局方法
CSS Grid是一种强大的布局工具，适用于更加复杂的布局需求。
1、基础示例
使用CSS Grid布局，将li元素设置为grid容器，并使用align-items和justify-items属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Method</title>
<style>
ul {
display: grid;
list-style-type: none;
padding: 0;
}
li {
display: grid;
align-items: center;
justify-items: center;
border: 1px solid #000;
height: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
通过将li元素的display属性设置为grid，并使用align-items和justify-items属性，可以实现文字的垂直和水平居中。
2、复杂布局
CSS Grid布局还可以处理更加复杂的布局需求，例如多列布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Grid Layout</title>
<style>
ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
list-style-type: none;
padding: 0;
}
li {
display: grid;
align-items: center;
justify-items: center;
border: 1px solid #000;
height: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</body>
</html>
在这个示例中，我们使用了grid-template-columns属性，将ul元素分为三列，每列中的li元素都可以实现文字的垂直和水平居中。
五、绝对定位方法
绝对定位也是一种可以实现垂直居中的方法，适用于特定的布局需求。
1、基础示例
使用绝对定位，将li元素的position属性设置为relative，文字的span元素设置为absolute：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Positioning Method</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
position: relative;
border: 1px solid #000;
height: 50px;
margin-bottom: 10px;
}
li span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<ul>
<li><span>Item 1</span></li>
<li><span>Item 2</span></li>
<li><span>Item 3</span></li>
</ul>
</body>
</html>
通过将li元素的position属性设置为relative，并将文字的span元素设置为absolute，可以实现文字在li元素内的垂直和水平居中。
2、结合其他定位
绝对定位方法也可以结合其他定位方法使用，例如在一个复杂的布局中，将某些特定的元素设置为absolute：
.container {
position: relative;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这种方法的灵活性较高，但在某些情况下可能需要更多的调整和调试。
六、使用框架和工具
除了手动编写CSS代码，还可以使用一些CSS框架和工具来实现文字的垂直居中。
1、Bootstrap
Bootstrap是一个流行的CSS框架，提供了许多内置的类，可以轻松实现垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Method</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<ul class="list-unstyled">
<li class="d-flex align-items-center" style="height: 50px; border: 1px solid #000; margin-bottom: 10px;">Item 1</li>
<li class="d-flex align-items-center" style="height: 50px; border: 1px solid #000; margin-bottom: 10px;">Item 2</li>
<li class="d-flex align-items-center" style="height: 50px; border: 1px solid #000; margin-bottom: 10px;">Item 3</li>
</ul>
</body>
</html>
使用Bootstrap的d-flex和align-items-center类，可以轻松实现li元素内文字的垂直居中。
2、其他框架
除了Bootstrap，还有许多其他CSS框架和工具可以实现类似的效果，如Foundation、Bulma等。
总结
通过本文的详细介绍，我们了解了多种在HTML中使li标签内文字垂直居中的方法，包括line-height、flexbox、table-cell、grid布局、绝对定位以及使用CSS框架和工具。每种方法都有其独特的优点和适用场景，开发者可以根据具体需求选择合适的方法来实现最佳的效果。
相关问答FAQs：
1. 在HTML中，如何实现使li中的文字垂直居中？
要使li元素中的文字垂直居中，可以使用CSS来实现。以下是一种常见的方法：
<ul>
<li class="vertical-center">文本内容</li>
</ul>
.vertical-center {
display: flex;
align-items: center;
}
这里我们使用了flex布局，通过align-items: center属性将li元素中的文字垂直居中。
2. 如何使用CSS使li元素中的文字垂直居中，而不影响其他元素？
要实现这个效果，你可以给li元素添加一个单独的类，并且在CSS中进行样式设置，如下所示：
<ul>
<li class="vertical-center">文本内容</li>
</ul>
.vertical-center {
display: flex;
align-items: center;
}
这样，只有带有.vertical-center类的li元素中的文字会垂直居中，其他元素不会受到影响。
3. 如何实现在li元素中的文字垂直居中，并且保持水平居中？
要实现在li元素中的文字同时实现垂直居中和水平居中，可以采用以下的CSS样式设置：
<ul>
<li class="vertical-center">文本内容</li>
</ul>
.vertical-center {
display: flex;
align-items: center;
justify-content: center;
}
通过添加justify-content: center属性，我们可以将li元素中的文字水平居中，同时保持垂直居中的效果。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3106311
