CODEWITHSUNDEEP
htmlcss
Steve W
Steve W

Reputation: 1128

How to vertically center img inside a span inside a div?

I'm trying to vertically center an image in a div. I've tried vertical-align:middle on many elements but can't find the correct css approach. I'm pretty sure it must be simple but can't get it right. I've added css to outline various sections of the html on page and can see the height of the 'a' and span is not taking up the full height of the div. This may be part of my problem but height: 100% doesn't seem to work on those elements. Can anybody help vertically centre the image in the parent div?

My 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>

and 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;
}

My page currently appears as follows: enter image description here

My desired result is that the red boxes are vertically centred in the green boxes.

Upvotes: 0

Views: 61

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

As your #thumbs element is already flexbox, you might as well make #thumbs div flexible as well. This way, your images can easily both horizontally and vertically center with only three lines:

display: flex;
align-items: center;
justify-content: center;

Also, if you want your <a> links to be the full size of the image, you'll want to remove your (unnecessary) <span> container entirely.

This can be seen in the following:

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>

Also note that you have duplicate #thumbsdiv IDs in your example, which is considered invalid markup. I've removed these in my answer (along with adding placeholder images).

Upvotes: 1

Related Questions