CODEWITHSUNDEEP
htmlcssgoogle-chromevertical-alignmentbaseline
Seppo420
Seppo420

Reputation: 2241

Issue with image and text alignment in Chrome

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.

Upvotes: 0

Views: 1371

Answers (2)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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/

Upvotes: 2

Basheer
Basheer

Reputation: 328

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

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

Upvotes: 0

Related Questions