如何将图像法师放在左上角

Question

我在这里完全是新手，我想将 vault-tec 图像放在左侧与导航菜单对齐，

 <body>
    <div class="container">
      <nav class="navbar">
        <img src="/images/vault-tec.png" alt="vault-tec-logo" />
        <div class="home">Home</div>
        <div class="about">About</div>
        <div class="services">Services</div>
      </nav>
    </div>
  </body>

这是 css 输入：

`
.container {
    background-color: #35538b;
    height: 300px;
}

.navbar {
    gap: 50px;
    display: flex;
    float: right;
    font-size: 30px;
    font-family: monospace;
    align-items: center;
    color: #eac852;
}
.navbar img {
    width: 300px;
    height: 200px;
    justify-content: flex-start;`

我尝试了 flex 属性display ， align-item...它不起作用，我想知道我到底做错了什么。 我附上一张图片以供参考。 谢谢

Answer 1

您可以使用 align-self 和 margin-right 将图像对齐到左上角，您的 CSS 代码应如下所示：

.navbar img {
    width: 300px;
    height: 200px;
    align-self: flex-start;
    margin-right: auto;
}

Answer 2

那是你想要的吗？ 我做对了吗？

 body{ margin:0; }.container { background-color: #35538b; height: 300px; }.navbar { gap: 50px; display: flex; float: right; font-size: 30px; font-family: monospace; align-items: center; color: #eac852; }.navbar.logo { padding:15px; width: 300px; height: 200px; display:flex; align-items:center; }.logo img{ width:100%; height:100%; }

 <div class="container"> <nav class="navbar"> <div class="logo"> <img src="https://images.pexels.com/photos/9604815/pexels-photo-9604815.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="vault-tec-logo" /> </div> <div class="home">Home</div> <div class="about">About</div> <div class="services">Services</div> </nav> </div>

Answer 3

通过放置 Flexbox 的特征，它以相同的方式分发给它的所有孩子。 因此，如果您想更改其中任何一个的 position 属性而不更改 rest 的状态，您可以使用自对齐或使导航栏的 position 属性等于“相对”，img position 属性等于“绝对”您可以通过左上角右下角的属性来操纵它的 position。 或者，我建议你最好将图标制作在一个新的容器中，并且在它的位置或它的子图标在其中的位置控制这个容器更容易，并且你也可以更流畅地控制图像