Vertically center two floating images

Question

I need to put two logo images on the same line, vertically centered relative to each other. Something like this:

This alone I could easily achieve with CSS vertical-align: middle;, but I also need the images to be at the very left and and the very right respectively; so normally I would do it with float: left and float: right, but then vertical-align stops working...

Another constraint is that I do not write HTML manually, but rather it is generated by a tool (pandoc, to be precise).

So long story short, I have the following two options for HTML:

Option 1:

<div id="logo-block">
  <p>
    <img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" />
  </p>
  <p>
    <img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" />
  </p>
</div>

Option 2:

<div id="logo-block">
  <p>
    <img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" />
    <img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" />
  </p>
</div>

Could you please help me styling any of these HTML snippets, so that I get the two images vertically centered within the "logo-block" boundaries, with "logo1" at the very left and "logo2" at the very right?

@TemaniAfif I don't think this is a duplicate of either of those questions. The vertical alignment is only part of the question - the OP also needs to display one image at the far-left and the other at the farright of the container. — FluffyKitten, Sep 17 '20 at 10:50
@FluffyKitten let's have more duplicate then. Having the Flexbox duplicate is enough for me to solve the issue since the left/right alignment is a trivial issue and can be obtained by simply changing one property when using flexbox — Temani Afif, Sep 17 '20 at 10:55
@TemaniAfif It might be trivial for you, but not for the OP - if it was, they wouldn't have had to ask! — FluffyKitten, Sep 17 '20 at 10:56
Indeed, those suggested "duplicates" do not exactly cover my scenario. I wasn't familiar with the flexbox syntax, and the above questions did not show the "justify-content: space-between" option. Anyway, the answer from @Priya below seems to do the job perfectly! — Dmitry Perets, Sep 17 '20 at 10:57
@FluffyKitten it's not trivial for *me*, it's trivial based on the duplicate. I gave you a detailed answer using flexbox so you can easily identify other trivial cases .. now he have more duplicates — Temani Afif, Sep 17 '20 at 10:58
@TemaniAfif ... only after we had to ask for the 2nd part of the question to be addressed :) — FluffyKitten, Sep 17 '20 at 11:00

Priya jain · Accepted Answer · 2020-09-22T10:36:19.293

2

Solved by CSS Flexbox:

The best move is to just nest a flexbox inside of a flexbox. All you have to do is give the child align-items: center. This will vertically align the text inside of its parent. Using display: flex you can control the vertical alignment of HTML elements.

Option 1 snippet:

#logo-block {
    display: flex;
    align-content: center;
    align-items: center; border:2px solid red; max-width:500px; justify-content:space-between;
}
#logo-block img { 
    max-width: 100px; 
}

 <div id="logo-block">
  <p>
    <img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" />
  </p>
  <p>
    <img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" />
  </p>
</div>

Option 2 snippet:**

#logo-block {
    width: 500px;
    border: 2px solid red;
}

#logo-block > p {
    display: flex;
    align-content: center;
    align-items: center; justify-content: space-between;
}
#logo-block img{ 
    max-width: 100px; 
}

<div id="logo-block">
  <p>
    <img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" />
    <img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" />
  </p>
</div>

Please use display: table-cell method if tool (pandoc + wkhtmltopdf) doesn't support CSS Flexbox:

#logo-block {
    display: table;
    width:100%;
    max-width:500px;
    border:2px solid red;
}
#logo-block p {
    display:table-cell;
    vertical-align:middle;
}
#logo-block p:last-child {
    text-align:right;
}
#logo-block img {
    max-width: 100px;
}

<div id="logo-block">
  <p> <img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" /> </p>
  <p> <img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" /> </p>
</div>

edited Sep 22 '20 at 10:36

answered Sep 17 '20 at 10:30

Priya jain

1,127
2
10
22

But this doesn't solve the horizontal alignment requirement. I need the left logo to be on the left side of the line and the right logo - on the right side (this is what I wanted to do with `float: left;` and `float: right` for the images, but this breaks both your method and `vertical-alignment` method). – Dmitry Perets Sep 17 '20 at 10:41
Using CSS flexbox this is possible too. I am updating my snippet by this fixing. Please check in 5 min. – Priya jain Sep 17 '20 at 10:45
Thanks, I think this covers my case perfectly! The `justify-content: space-between` did the missing magic! – Dmitry Perets Sep 17 '20 at 10:58
Just for the reference - in my case, I had to add QT Webkit-specific CSS properties, because the tool I am using (pandoc + wkhtmltopdf) does not support CSS Flexbox fully... So to have this behavior: `{ display: flex; align-content: center; align-items: center; justify-content: space-between }`, I needed to add these: `{ display: -webkit-box; -webkit-box-pack: justify; -webkit-box-align: center; -webkit-align-items: center }`. Luckily, once you know that an option _exists_, finding engine-specific syntax is much easier =) – Dmitry Perets Sep 17 '20 at 11:44
No worry, If your tool does not support CSS Flexbox fully We can do this using ''display: table-cell '' method. I am adding snippet in my another answer. Ohh I am unable to add answer due to this duplicate question.Just add this CSS for option 1 -----------#logo-block {display: table; width:100%; max-width:500px; border:2px solid red; } #logo-block p{ display:table-cell; vertical-align:middle; } #logo-block p:last-child{text-align:right;} #logo-block img{ max-width: 100px; } } }--------- – Priya jain Sep 17 '20 at 11:53
You can [edit] this answer though :) easier than trying to read code from a comment – FluffyKitten Sep 17 '20 at 12:02
1

@DmitryPerets I updated my answer also If your tool does not support CSS Flexbox fully. – Priya jain Sep 17 '20 at 12:07
What do you mean by "if the tool doesn't support flexbox"? Do you mean if the web browser doesn't? All browsers support flexbox. Even IE back to version 10 supports it somewhat. Please don't recommend table-based alternatives to flexbox anymore unless the content is *actually tabular data*. – TylerH Sep 21 '20 at 14:47
It seems like you didn't read comment of @Dmitry Perets. I suggested first CSS flexbox him but as per him, He is using (pandoc + wkhtmltopdf) which does not support CSS Flexbox fully. So, I suggested multiple solution. So, I was talking about tool not browser. – Priya jain Sep 22 '20 at 10:35

score 0 · Answer 2 · answered Sep 17 '20 at 10:25

I prefer to use images as background with background-size:contain, background-position: center. This way, the image size and image shape no longer matter. It'll show as large as the canvas allows. This is also very responsive:

#logo-block >div{
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px dotted grey; /* Just for demo, to show the 'canvas' */
}

<div id="logo-block">
    <div style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg');"></div>     
    <div style="background-image: url('https://www.festisite.nl/static/partylogo/img/logos/burger-king.png');"></div>
</div>

I cannot control the generated HTML, as I mentioned in the question. I can generate only Option 1 snippet or Option 2 snippet. But I am free to write any CSS that I wish. — Dmitry Perets, Sep 17 '20 at 10:42

Vertically center two floating images

2 Answers2