Flexbox puts image at top but text-links at bottom

Question

I got a project where I put a flex menu on top of a picture slider. I want the items to use the same baseline, but I cannot set it to be on the same line.

a img{
  height: 40px;
}
.links{
  display: flex;
  align-items: baseline;
}

<div class="links">
  <a class="img-link"> <img src="anypicture.jpg"></a>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</div>

https://jsfiddle.net/7xnesjpy/13/

The container of the picture is slightly above the container of the text-links, what can I do to set them to the same ground/baseline

because you've told it to? The problem is your image has the white-space at the bottom — Pete, Feb 19 '18 at 14:16
The image used in your fiddle, https://www.zdf.de/assets/logo-logo-schwarz-100~760x340?cb=1516364243305, has lots of transparent space underneath the orange logo ... add `background-color: blue` for the img element, then you will see that it already is aligned on the baseline, same as the text. — CBroe, Feb 19 '18 at 14:17

Asons · Accepted Answer · 2018-02-19T17:37:12.783

When you use baseline, it is the img's bottom that will line up with the bottom of the text, as you can see here, where I added a border to the items.

a img{
  height: 40px;
  border: 1px solid blue;
}
.links{
  display: flex;
  align-items: baseline;
}
.links a + a {
  border: 1px solid blue;
}

<div class="links">
  <a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</div>

For the img to align with the text/link elements bottom, you need flex-end.

a img{
  height: 40px;
  border: 1px solid red;
}
.links{
  display: flex;
  align-items: flex-end;
}
.links a {
  border: 1px solid blue;
}

<div class="links">
  <a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</div>

But as you can see in the 2nd sample, there is still a gap below the img.

This gap all inline element has, and to get rid of that, change the img's display type to block.

a img{
  display: block;
  height: 40px;
  border: 1px solid red;
}
.links{
  display: flex;
  align-items: flex-end;
}
.links a + a {
  border: 1px solid blue;
}

<div class="links">
  <a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</div>

score 0 · Answer 2 · answered Feb 19 '18 at 14:21

0

Your image has a lot of transparent space around it, but you can fix it by adding margin to you a img{} like so:

a img{
  height: 40px;
  margin-bottom:-20px;
}

.links{
  display: flex;
  align-items: baseline;
}

answered Feb 19 '18 at 14:21

Glitch Fish

41
1
13

J. Patidar · Answer 3 · 2018-02-19T14:27:39.490

0

Your CSS is working fine but the problem is the image. There is unwanted space in your image. Please see in the fiddle now.

edited Feb 19 '18 at 14:27

answered Feb 19 '18 at 14:25

J. Patidar

34
6

I updated the image, the container is still slightly above the others – Feb 19 '18 at 14:27

score 0 · Answer 4 · answered Feb 19 '18 at 14:48

0

Removing all Padding and Margin from the image fixes it.

a img {margin: 0; padding: 0;}

https://jsfiddle.net/7xnesjpy/27/

answered Feb 19 '18 at 14:48

Lee A.

33
6

Flexbox puts image at top but text-links at bottom

4 Answers4