如何在具有動態尺寸的包裝 div 中將 3 個 div 垂直居中對齊在最左側、最右側和絕對中心？

Question

我是 Svelte 的新手，我非常喜歡它，在為我的項目設計頂部導航欄時，由於 Svelte 的 JS DOM 樣式方法，我無法達到預期的結果。 如果你能在這方面指導我，那就太好了。

標記如下

 <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

您可以輕松地做到這一點利用flexbox在.width-restriction ：

 .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

希望這可以幫到你！