如何在具有动态尺寸的包装器 div 中垂直居中对齐最左、最右和绝对中心的 3 div？

Question

我是 Svelte 的新手，我非常喜欢它，在为我的项目设计顶部导航栏时，由于 Svelte 的 JS DOM 样式方法，我无法达到预期的效果。如果你能指导我就太好了。

The markup is as follows

 <div class="top-nav">
        <div class="width-restriction">
            <div id="hamburger-icon">
                <HamburgerIcon /> <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme left -->
            </div>
            <h1 class="head" id="logo">VKYD</h1> <!-- Logo; needs to be centered -->
            <div id="shopping-cart-icon">
                <ShoppingCartIcon /> <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme right -->
            </div>
        </div>
    </div>

Answer 1

您可以在 .width-restriction 上使用 flexbox 轻松实现此目的：

.width-restriction {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="top-nav">
  <div class="width-restriction">
    <div id="hamburger-icon">
      icon-hamburger
      <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme left -->
    </div>
    <h1 class="head" id="logo">VKYD</h1>
    <!-- Logo; needs to be centered -->
    <div id="shopping-cart-icon">
      icon-shop
      <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme right -->
    </div>
  </div>
</div>

在 Svelte 中，您需要像这样在 style 标签中定义样式：

<style>
    .width-restriction {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>

 <div class="top-nav">
     <div class="width-restriction">
         <div id="hamburger-icon">
             icon-hamburger <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme left -->
         </div>
         <h1 class="head" id="logo">VKYD</h1> <!-- Logo; needs to be centered -->
         <div id="shopping-cart-icon">
             icon-shop <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme right -->
         </div>
     </div>
</div>

检查REPL。

Answer 2

我不熟悉 Svelte，但通常使用

可以很容易地实现这种类型的放置

display: flex;
justify-content: space-between;

您可以在此处查看属性的快速演示（见页面底部）：https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

希望对您有所帮助！

如何在具有动态尺寸的包装器 div 中垂直居中对齐最左、最右和绝对中心的 3 div？

How to vertically center align 3 divs at extreme left, extreme right and absolute centre in a wrapper div with dynamic dimensions?

html

javascript

css

svelte

如何在具有动态尺寸的包装器 div 中垂直居中对齐最左​​、最右和绝对中心的 3 div？

How to vertically center align 3 divs at extreme left, extreme right and absolute centre in a wrapper div with dynamic dimensions?

html

javascript

css

svelte

如何在具有动态尺寸的包装器 div 中垂直居中对齐最左、最右和绝对中心的 3 div？