Question

我正在尝试在div中垂直居中放置图像。我已经尝试在许多元素上使用vertical-align：middle，但是找不到正确的css方法。我敢肯定，它一定很简单，但是做得不好。我添加了css来概述页面上html的各个部分，并且可以看到'a'的高度，而span并未占据div的全部高度。这可能是我的问题的一部分，但是高度：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;
}

我的页面当前显示如下：

我想要的结果是红色框垂直于绿色框居中。

Answer 1

由于您的#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，这被视为无效标记。我已经在答案中删除了这些（以及添加占位符图像）。

如何在div内的span内垂直居中img？

1 个答案: