如何在同一div中包含另一个元素的同时使徽标与div边界对齐？

Question

我正在设计一个导航栏，其中有我的学校徽标，右边是客户图片。我希望徽标忽略帐户图片div并与div对齐。查看图片以获得更多背景信息。

|--------logo--------|
|-------logo-------ac|

由于信誉低，我无法发布图片，所以这里是文字表示

我希望徽标像第一行一样对齐，但要与客户图片对齐。

我尝试使用z-index，但是没有用。 ：（

Answer 1

好吧，如果您希望徽标始终位于中心并且帐户图片始终位于最右角，则可以进行position标记。在下面检查一下：

header {
  overflow: hidden;
  text-align: center;
  position: relative;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

header h1 {
  margin: 0;
}

header h1 img {
  height: 100px;
}

header .acct {
  width: 50px;
  position: absolute;
  right: 0;
  top: 50%;
  right: 20px;
  margin-top: -25px;
}

<header>
  <h1>
    <a href=""><img src="https://i.imgur.com/iP7576O.png" alt="Logo" /></a>
  </h1>
  <img src="https://i.imgur.com/JcFpfoF.jpg" alt="Praveen" class="acct" />
</header>

<p>Here's a comparison for the logo alone centred.</p>

<header>
  <h1>
    <a href=""><img src="https://i.imgur.com/iP7576O.png" alt="Logo" /></a>
  </h1>
</header>

使用上面的代码，您将能够实现所需的功能。查看预览。

可以删除边框，仅出于说明目的显示边框。