gpt4 book ai didi

css - 导航栏菜单项垂直居中

转载 作者:行者123 更新时间:2023-11-28 06:09:13 25 4
gpt4 key购买 nike

我希望我的绿色菜单项在红色容器(高度为 70 像素)中垂直居中。我已经能够通过玩边距来实现这一点,但这不是一个理想的解决方案。无论红色容器的高度是多少,实现这一目标的“最干净”方法是什么?非常感谢,

enter image description here

.nav-wrap {
width:100%;
max-width:800px;
margin:0px auto;
}

#nav.affix {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: red;
z-index:10;
opacity: 0.9;
left: 0;
margin-top: 0;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari et Chrome */
-o-animation: fadein 2s; /* Opera */

}

最佳答案

这应该给出如何完成作业的想法。

nav{  
width: 100%;
display: table;

position: fixed;
top: 0px;
left: 0px;

background: #ff0000;
}
nav > div{
height: 70px;
display: table-cell;
vertical-align: middle;

}
nav > div > label{
color: #ffffff;
padding: 2.5px 5px;
background: green;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
<nav>
<div><label>Who are We</label></div>
<div> <label>Services</label></div>
</nav>

关于css - 导航栏菜单项垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36267614/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com