[英]Vertically center divs to the left and right of an enlarged div in a grid
[英]How to vertically center align 3 divs at extreme left, extreme right and absolute centre in a wrapper div with dynamic dimensions?
我是 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>
您可以轻松地做到这一点利用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 。
我不熟悉 Svelte,但通常,使用这种类型的放置可以很容易地实现
display: flex;
justify-content: space-between;
您可以在此处查看该属性的快速演示(请参阅页面底部): https : //developer.mozilla.org/en-US/docs/Web/CSS/justify-content
希望这可以帮到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.