1

I want the text and the icon both perfectly vertically centered like this:

Screen correct

That's why I used display:flex with align-items:center but what I get is this:

Screen fail

Code

Note: I am using React, so please mind the inline-styles :-)

<div style="background-color:#999;position:fixed;width:100%;height:52px;box-shadow:0 -12px 27px #999;display:flex;align-items:center">
   <div style="flex:1;height:24px;margin-left:20px">
      <div style="display:inline-block;width:24px;height:24px;border: 1px solid green;">
         <img style="width:100%;height:100%;border:0" src="https://t3.ftcdn.net/jpg/00/63/33/38/240_F_63333813_qO48nGh5uFZ0EVkCYS3ZehhrR10dWg4D.jpg" alt="Logo">
      </div>
      <h1 style="display:inline-block;margin:0;text-transform:uppercase;font-family:Raleway, serif;font-weight:900;font-size:18px;height:24px;border: 1px solid red;">MyLogo</h1>
   </div>
</div>

Pen

https://codepen.io/valnub/pen/XzxOvY

What's wrong? I don't get it :-( Please help me, oh mighty flexbox css masters!

Timo Ernst
  • 15,243
  • 23
  • 104
  • 165

1 Answers1

3

You are setting the outer container to display: flex, but not the inner container. Adding display: flex to that should fix your issue:

<div style="background-color:#999;position:fixed;width:100%;height:52px;box-shadow:0 -12px 27px #999;display:flex;align-items:center">
   <div style="display: flex;flex:1;height:24px;margin-left:20px">
      <div style="display:inline-block;width:24px;height:24px;border: 1px solid green;"><img style="width:100%;height:100%;border:0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=" alt="Logo"></div>
      <h1 style="display:inline-block;margin:0;text-transform:uppercase;font-family:Raleway, serif;font-weight:900;font-size:18px;height:24px;border: 1px solid red;">MyLogo</h1>
   </div>
</div>

https://codepen.io/anon/pen/wPYOed

delinear
  • 2,745
  • 1
  • 10
  • 21