Html 如何使表格单元格中的内容垂直居中
这就是我想要的： 这就是我所拥有的： 这是我的密码：Html 如何使表格单元格中的内容垂直居中,html,css,Html,Css,这就是我想要的： 这就是我所拥有的： 这是我的密码： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Index</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> &l
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
</header>
<main>
<ul class="ul">
<li class="li"><img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg"
alt="pic">Content</li>
</ul>
</main>
<footer>
</footer>
</body>
</html>
没有达到我想要的效果，我还尝试了弹性和绝对位置。使用
垂直对齐：中间：
.selector {
vertical-align: middle
}
垂直对齐CSS属性设置内联、内联块或表格单元格框的垂直对齐
尝试使用flex-box
.li{
font-weight: bold;
font-size: 50px;
display: flex;
align-items: center;
}
使用a将是一个更好的解决方案。先决条件是将“内容”放在单独的HTML元素中。在本例中，我使用了span
.ul{
/*显示：表格*/
保证金：0自动；
列表样式：无；
}
李先生{
字体大小：粗体；
字体大小：50px；
显示：flex；/*已添加*/
对齐项目：居中；/*已添加*/
}
img{
宽度：200px；
}
-
内容
首先，我欢迎您加入Stackoverflow社区
通过在CSS中使用flexbox，可以获得所需的结果。我把相同的HTML放在这里，只是把“内容”放在一个跨度内
指数
- 内容
添加显示：flex；并对齐项目：居中；到您的.li选择器，如下所示
.ul{
显示：表格；
保证金：0自动；
列表样式：无；
}
李先生{
字体大小：粗体；
字体大小：50px；
显示器：flex；
对齐项目：居中；
}
img{
宽度：200px；
}
希望我的答案对您有所帮助。检查您的答案是否在这里：
.li{
font-weight: bold;
font-size: 50px;
display: flex;
align-items: center;
}