html - 以第二个为中心的中心 3 不对称 div

Question

听起来与其他问题相似，但我的问题是这样的:我想将 2 个不同的 Logo 连接在一起，并在它们之间添加一个加号图标。 Logo 必须处于相同高度但保持比例。所以大多数时候一些标志会比另一个长。当我用 text-align 居中时，结果与我想要的大不相同:

我想通过 + 标记将它居中对齐。

这是我的代码:

div#coopLogo div {
  display: inline-block;
}

#logo-container {
  text-align: center;
  width: 100%;
  display: block;
}

#middle-indicator {
  width: 50%;
  border-right: 1px solid;
  height: 100px;
}

<div id="logo-container">
  <div id="coopLogo">
    <div>Brand 1 logo(longer)</div>
    <div>+</div>
    <div>B2 logo</div>
  </div>
</div>
<br>
<div id="middle-indicator"></div>

JSFiddle

Answer 1

现在我解决了。我将 Logo 移到“加号”div 中并将其居中对齐，然后将 Logo 的 position 更改为 absolute。 我更新的 HTML:

div#coopLogo div {
  display: inline-block;
}

img {
  top: 0;
  height: 50px;
}

div#coopLogo {
  height: 50px;
}

.plus {
  position: relative;
  width: 10px;
  overflow: visible;
  margin: 0 auto;
}

.lg-right {
  position: absolute;
  right: 100%;
}

.lg-left {
  position: absolute;
  left: 100%;
}

#logo-container {
  text-align: center;
  width: 100%;
  display: block;
}

#middle-indicator {
  width: 50%;
  border-right: 1px solid;
  height: 100px;
}

<div id="logo-container">
  <div id="coopLogo">
    <div class='plus'>
      <img class='lg-left' src="/image/3efOW.png">+
      <img class='lg-right' src="https://assets.crossref.org/logo/crossref-logo-landscape-200.svg" alt=""></div>
  </div>
</div>
<br>
<div id="middle-indicator"></div>

fiddle :https://jsfiddle.net/vskuvw3s/20/ 如果你们有其他方法可以做到这一点或有任何改进建议，请随时发表评论/回答。