html – 使用CSS Flexbox的仪表板标题

概述我想使用CSS Flexbox创建这样的东西： 我通常使用浮点数和大量定位调整来实现这一点,在元素的顶部,底部,左侧和右侧添加边距,填充,百分比值以将其调整到某个视口,但它似乎在不同的视口中断开. 我知道这不是正确的方法,我最终写了太多的CSS,但在不同的视口上看起来仍然不一致. 将徽标完美地放在中心并垂直对齐是我在苦苦挣扎的地方. 这是HTML代码. <nav class="navbar"> 我想使用CSS FlexBox创建这样的东西：

我通常使用浮点数和大量定位调整来实现这一点,在元素的顶部,底部,左侧和右侧添加边距,填充,百分比值以将其调整到某个视口,但它似乎在不同的视口中断开.

我知道这不是正确的方法,我最终写了太多的CSS,但在不同的视口上看起来仍然不一致.

将徽标完美地放在中心并垂直对齐是我在苦苦挣扎的地方.

这是HTML代码.

<nav >    <div >        <button  type="button">☰</button>    </div>    <div >        <a href="" >logo</a>    </div>    <div >        <a href="">link1</a>        <a href="">link2</a>    </div>    <div >        <div ></div>    </div>    </nav>

解决方法 你可以使用justify-content：space-between和get right spacing和align-items：center for vertical align.

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

<nav >  <div >    <button  type="button">☰</button>  </div>  <div >    <a href="" >logo</a>  </div>  <div >    <div >      <a href="">link1</a>      <a href="">link2</a>    </div>    <div >      <div >Mail</div>    </div>  </div></nav>

如果你想要徽标完全居中,那么你需要将它从位置：绝对的元素流中删除;

.navbar,.links {  display: flex;  align-items: center;  justify-content: space-between;  position: relative;}.headerlogo {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);}

<nav >  <div >    <button  type="button">☰</button>  </div>  <div >    <a href="" >logo</a>  </div>  <div >    <div >      <a href="">link1</a>      <a href="">link2</a>    </div>    <div >      <div >Mail</div>    </div>  </div></nav>

总结

以上是内存溢出为你收集整理的html – 使用CSS Flexbox的仪表板标题全部内容，希望文章能够帮你解决html – 使用CSS Flexbox的仪表板标题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。