垂直居中两个浮动图像[重复]

Question

我需要将两个徽标图像放在同一行，彼此垂直居中。 像这样的：

仅此一项我可以使用 CSS vertical-align: middle; 轻松实现，但我还需要图像分别位于最左侧和最右侧；所以通常我会用float: left 和float: right 来做，但随后vertical-align 停止工作......

另一个限制是我不手动编写 HTML，而是由工具（确切地说是 pandoc）生成。

长话短说，我对 HTML 有以下两种选择：

选项 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>

选项 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>

能否请您帮我设计这些 HTML sn-ps 的样式，以便我将两个图像垂直居中在“logo-block”边界内，“logo1”在最左边，“logo2”在最左边对吧？

Answer 1

由 CSS Flexbox 解决：

最好的办法是在一个弹性盒子里面嵌套一个弹性盒子。您所要做的就是给孩子align-items: center。这将垂直对齐其父项内部的文本。使用 display: flex 可以控制 HTML 元素的垂直对齐方式。

选项 1 sn-p：

#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>

选项 2 sn-p:**

#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>

如果工具（pandoc + wkhtmltopdf）不支持 CSS Flexbox，请使用display: table-cell 方法：

#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>

Answer 2

我更喜欢用background-size:contain、background-position: center 的图片作为背景。这样，图像大小和图像形状不再重要。它会显示在画布允许的范围内。这也非常敏感：

#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>