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

![](https://i.stack.imgur.com/Wq7BQ.png)

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?