html - 将导航栏中的 div 垂直居中并向右定位

Question

我在导航栏中有很多链接。大多数链接都位于左侧。我想将一些链接放在右侧 (right-side-login-cart)。给我带来麻烦的部分是我可以获得右侧的链接，但无法让链接垂直对齐。

我尝试了很多不同的方法来让它工作。例如，我有 float:right;，使用 transform 来平移 Y，并尝试使用垂直对齐。

一些不同的尝试:

HTML

<div class="links-at-top">
    <div class="links-div">
        <a href="/">
          <img src="example.com/img">
        </a>
        <a href="/link-1">Link1</a>
        <a href="/link-2">Link2</a>
    </div>
    <div class="right-side">
        <div class="positioning">
            <a id="right-link-1">RightLink1</a>
            <a id="right-link-2">RightLink2</a>
        </div>
    </div>
</div>

尝试 1:

CSS:

.right-side {
    padding-right: 50px;
    display: inline-block;  
}
.positioning {
    position: absolute;
    right: 0;
    transform: translateY(-50%);        
}

尝试 2:

CSS:

.right-side {
    padding-right: 50px;
    display: inline-block;  
}
.positioning {
    vertical-align: middle;     
}

Answer 1

将您的 .right-side div 添加到与其他链接相同的 div 中，以便它们位于同一行。然后你就可以向右漂浮了。

.links-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="links-at-top">
    <div class="links-div">
    
        <div>
            <a href="/link-1">Link1</a>
            <a href="/link-2">Link2</a>
        </div>

        <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt="" />

        <div>
            <a id="right-link-1">RightLink1</a>
            <a id="right-link-2">RightLink2</a>
        </div>
    </div>
</div>