我正在尝试使 div 中的图像垂直居中。我在许多元素上尝试了 vertical-align:middle 但找不到正确的 css 方法。我很确定它一定很简单，但做对了。我已经添加了 css 来概述页面上 html 的各个部分，并且可以看到“a”的高度和 span 没有占据 div 的整个高度。这可能是我问题的一部分，但 height: 100% 似乎不适用于这些元素。任何人都可以帮助将图像在父 div 中垂直居中吗？
我的 html:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="index">
<div id="thumbs">
<div id='thumbsdiv'><span class="thumbcell"><a href="0.html"><img src="thumbs\0.jpg" title="0" alt="0.jpg" /></a></span></div>
<div id='thumbsdiv'><span class="thumbcell"><a href="1.html"><img src="thumbs\1.jpg" title="1" alt="1.jpg" /></a></span></div>
<div id='thumbsdiv'><span class="thumbcell"><a href="2.html"><img src="thumbs\2.jpg" title="2" alt="2.jpg" /></a></span></div>
<div id='thumbsdiv'><span class="thumbcell"><a href="3.html"><img src="thumbs\3.jpg" title="3" alt="3.jpg" /></a></span></div>
</div>
</div>
</body>
</html>
和 CSS:
body {
background-color: #808080;
color: #FFFF00;
}
img {
height: 80px;
width: 80px;
margin: 5px 5px 5px 5px;
border-style: solid;
border-color: #ff0000;
border-width: 1px;
}
#thumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#thumbs div {
height: 180px;
width: 220px;
min-width: 200px;
margin: 1px 1px 1px 1px;
border-style: solid;
border-color: #00ff00;
border-width: 1px;
text-align: center;
vertical-align: middle;
padding: 10px;
}
a{
margin: 1px 1px 1px 1px;
border-style: solid;
border-color: #0000ff;
border-width: 1px;
justify-content: center;
}
span{
margin: 10px 10px 10px 10px;
border-style: solid;
border-color: #00ffff;
border-width: 1px;
justify-content: center;
}
我的页面目前显示如下:
我想要的结果是红色框在绿色框中垂直居中。
最佳答案
作为您的 #thumbs元素已经是flexbox , 你不妨制作 #thumbs div也很灵活。这样，您的图像可以轻松地水平和垂直居中，只需三行:
display: flex;
align-items: center;
justify-content: center;
另外，如果你想要你的 <a>链接是图像的完整大小，你会想要删除你的(不必要的)<span>完全是容器。
这可以从以下方面看出:
body {
background-color: #808080;
color: #FFFF00;
}
img {
height: 80px;
width: 80px;
margin: 5px 5px 5px 5px;
border-style: solid;
border-color: #ff0000;
border-width: 1px;
}
#thumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#thumbs div {
display: flex;
align-items: center;
justify-content: center;
height: 180px;
width: 220px;
min-width: 200px;
margin: 1px 1px 1px 1px;
border-style: solid;
border-color: #00ff00;
border-width: 1px;
text-align: center;
vertical-align: middle;
padding: 10px;
}
a {
margin: 1px 1px 1px 1px;
border-style: solid;
border-color: #0000ff;
border-width: 1px;
justify-content: center;
}<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="index">
<div id="thumbs">
<div><a href="0.html"><img src="https://via.placeholder.com/100x100" title="0" alt="0.jpg" /></a></div>
<div><a href="1.html"><img src="https://via.placeholder.com/100x100" title="1" alt="1.jpg" /></a></div>
<div><a href="2.html"><img src="https://via.placeholder.com/100x100" title="2" alt="2.jpg" /></a></div>
<div><a href="3.html"><img src="https://via.placeholder.com/100x100" title="3" alt="3.jpg" /></a></div>
</div>
</div>
</body>
</html>另请注意，您有重复的 #thumbsdiv您示例中的 ID，这被视为无效标记。我在我的回答中删除了这些(以及添加占位符图像)。
关于html - 如何在 div 内的 span 内垂直居中 img？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54135775/