如何将 img 垂直居中放置在 div 内的 span 内？-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

489336

文章

250650551

访问

+关注

分类

暂无分类

日期归档

暂无数据

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

发布于2024-11-03 21:54 阅读(190) 评论(0) 点赞(18) 收藏(4)

我正在尝试将图像垂直居中放置在 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>