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

Question

我正在设计一个导航栏，中间是我的学校徽标，右边是用户头像。我希望徽标忽略帐户图片 div 并与 div 对齐。查看图片了解更多背景信息。

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

我不能post一张图片，因为声誉点低所以这里是一个文字表示

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

我试过使用 z-index 但没有用。 :(

Answer 1

好吧，如果您希望徽标始终居中并且帐户图片始终位于最右角，您可以使用 positioning。在下面查看：

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>

有了上面的代码，你就可以达到你想要的效果了。查看预览。

可以删除边框，显示它只是为了说明目的。

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

How to align logo to div boundaries while having another element in the same div?

html

css

z-index

alignment