Issue with image and text alignment in Chrome

Question

Ok, so I'm fighting with vertical alignment and on the verge of mental collapse. My hacky solution finally seems to work otherwise, but Chrome fucks up the baseline somehow.

Here's the fiddle:

https://jsfiddle.net/53272b1v/10/

Here's the pasted code:

<div class="outer">
<div class="img"></div>
   <div class="main">

     <div style="display:flex;height:100%;align-items:center;">
       VITTUSAATANA

     </div>

   </div>
</div>

css:

div.outer{

}
div.main{
  height:51px;

  display:inline-block;
  border:1px solid red;
}
div.img{
  background-image:url("https://digiluovuus.files.wordpress.com/2010/04/media_httpkotiwelhoco_cfizk-scaled5001.jpg?w=409&h=517");
  background-size:100%;
  width:41px;
  height:51px;
  display:inline-block;
}

Works fine with firefox, but on Chrome (fresh version that seems to have hidden the version number to a place I can't be arsed to search).

The text should be aligned to the middle of the picture and middle of its parent element + the parent should be in line with the picture. This is what I'm seeing with Firefox.

But on Chrome, the text's parent element is dragged down so that the text is aligned to the bottom of the image.

.img and .main need to be display:inline-block and the solution should involve only touching the main element + it's children.

Your title is not a good decription of your problem, in my opinion. Perhaps you could rephrase it, this time without swear words? — Mathias Müller, Feb 11 '16 at 14:18
It seems that there are chrome fanboys here, I don't know why my comment was deleted. I can't be criticism with google products? — Marcos Pérez Gude, Feb 11 '16 at 14:33

Marcos Pérez Gude · Accepted Answer · 2016-02-11T14:32:55.997

2

I think your problem is for mixing flexbox with inline-block elements. The solution is remove the flexbox and adding vertical-align. It will be working in all browsers:

https://jsfiddle.net/53272b1v/11/

 div.main,
 div.img{
    vertical-align:top;
 }

EDIT

Just add the vertical-align property:

https://jsfiddle.net/53272b1v/14/

edited Feb 11 '16 at 14:32

answered Feb 11 '16 at 14:19

Marcos Pérez Gude

21,869
4
38
69

I cant really do the centering using line-height as the content of main can be pretty much anything. Building a React component to solve this vertical layout bullshit once and for all. – Seppo420 Feb 11 '16 at 14:27
I edit the answer. Just add the vertical align, and it works with the flexbox alignment. – Marcos Pérez Gude Feb 11 '16 at 14:33

score 0 · Answer 2 · answered Feb 11 '16 at 14:31

0

Just add float: left; it worked in Chrome too...

<div style="display:flex;height:100%;align-items:center;float:left;">VITTUSAATANA</div>

answered Feb 11 '16 at 14:31

Basheer

328
1
2
10

Issue with image and text alignment in Chrome

2 Answers2

EDIT