Question

我正在开发一个网站，我开始时没有自举，并制作了一个简单的导航栏，在那里我使用了行高和垂直对齐，如下所示：

.navigation {
padding:0;
margin:0;
background:#efefef;
position:fixed;
list-style:none;
box-shadow: 0 2px 5px 0 lighten(#000, 55%) ;
top:0;
z-index:998;
width:100%;
text-align:center;
font-size:12px;
font-family: 'Montserrat', sans-serif;
li {
    display:inline-block;
    vertical-align:middle;
    line-height:15px;
    padding: 15px 25px;
    a{
        display:inline-block;
        color:#6d6d6d;
        text-decoration:none;
        &:hover{
            color: lighten(#6d6d6d, 20%);
        }
    } 
}

现在使用bootstrap后它不再工作了，这是bootstrap之后的标记：

<div id="custom-navbar" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-brand">
            <img src="imgs/logo.png">
        </div>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        MENU
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul id="custom-navbar-ul" class="nav navbar-nav navbar-right">
                <li><a href="#">HOME</a></li>
                <li><a href="#">BENEFITS</a></li>
                <li><a href="#">APPS<br>WIDGET</a></li>
                <li><a href="#">PLACEMENT<br>GUIDE</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><button type="button" id="sign-up" class="btn btn-sm"><a href="#">SIGN UP</a></button></li>
                <li><button type="button" id="sign-in" class="btn btn-sm"><a href="#">SIGN IN</a></button></li>
            </ul>
        </div>
    </div>

</div>

标记：

#custom-navbar{
height:80px;
background:#efefef;
box-shadow: 0 2px 5px 0 lighten(#000, 55%) ;
z-index:9999;}

#custom-navbar-ul{
text-align:center;
font-size:12px;
li{
    display:block;
    vertical-align:middle;
    line-height:15px;
    padding:.7% 8px;
}}

我看到几个答案，它要求使用表格，我做了，但仍然没有效果，可能是什么问题？

Answer 1

尝试设置样式：

#custom-navbar-ul {
  text-align:center;
  font-size:12px;
}
#custom-navbar-ul li {
  display:block;
  vertical-align:middle;
  line-height:15px;
  padding:.7% 8px;
}

垂直对齐和线高不起作用

1 个答案: