如何将图像放在左侧，将另一个图像放在一行中心？

Question

我正在制作登录屏幕，但很难找到解决方案，以便在左侧查看image 1，在中心查看image 2。它总是彼此相邻，或者图像位于我想要的位置，但它不在同一行。

img.logo2 {
  display: inline-block;
}
img.roc1 {
  display: inline-block;
  width: 250px;
  height: 125px;
}
header {
  background-color: rgba(255, 0, 0, 0.7);
}

<header>
  <img src="../styles/roc.png" class="roc1">
  <img src="../fts.PNG" class="logo2">
</header>

Answer 1

使用absolute定位和text-align: center可以实现所需，请参阅此代码段作为示例：

img.logo2 {
  display: inline-block;
}
img.roc1 {
  display: inline-block;
  width: 250px;
  height: 125px;
  position: absolute;
  top: 0;
  left: 0;
}
header {
  background-color: rgba(255, 0, 0, 0.7);
  position: relative;
  text-align: center;
  height: 125px;
}

<header>
  <img src="../styles/roc.png" class="roc1">
  <img src="../fts.PNG" class="logo2">
</header>