Centering an image vertically within a div

Question

I have a series <a> tags which represent links on my website. Some of the links have text, and some have an image. Unfortunately, I cannot get the image links vertically centered with the <a>.

.button {
  background-color: #339a8c;
  border-radius: 8px;
  color: #fff;
  font-weight: 400;
  margin: 0 5px;
  padding: 8px;
  text-decoration: none;
}

.buttonImage {
  background-color: #339a8c;
  border-radius: 8px;
  padding: 8px;
}

<div id="nav">
  <a class="button" href="/misc/why">Home</a>
  <a class="button" href="/about">About</a>
  <a class="button" href="/projects">Projects</a>
  <a class="buttonImage" href="/cubesolver"><img height="18px" src="img/cubesolver.png" /></a>
</div>

Did you attempt with Flexbox? So basically you'd make the nav a flex container, and then align the items inside the div. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — matmik, Dec 22 '17 at 19:43

Luis felipe De jesus Munoz · Accepted Answer · 2017-12-22T19:42:33.557

.button {
  background-color: #339a8c;
  border-radius: 8px;
  color: #fff;
  font-weight: 400;
  margin: 0 5px;
  padding: 20px 8px;
  text-decoration: none;
  
}

.buttonImage {
  background-color: #339a8c;
  border-radius: 8px;
  padding: 20px 8px;
}

.buttonImage img{
  display:[inline-]block;
  vertical-align: middle;
}

<div id="nav">
  <a class="button" href="/misc/why">Home</a>
  <a class="button" href="/about">About</a>
  <a class="button" href="/projects">Projects</a>
  <a class="buttonImage" href="/cubesolver"><img height="38px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Happy_smiley_face.png/480px-Happy_smiley_face.png" /></a>
</div>

Try this

.buttonImage img{
    display: inline-block;
    vertical-align: middle;
}

UPDATE Sorry. Imgs are inline elements so they are aligned to the baseline of the text of the parent element. With inline-block we prevent this and with vertical-align we can set the position where we want our img

Centering an image vertically within a div

1 Answers1