Question

我在为我的网站构建导航栏时遇到一些问题。我有一个右侧对齐的徽标，但它强制其余的li与徽标的底部对齐。如何使列表项水平居中对齐。

<nav class="main_nav">
            <ul>
                <li><a href="#home"><img class="logo" alt="logo" src="images/logo.svg"></a></li>
                <li class="list_item"><a href="#about" class="li_nav">About Us</a></li>
                <li class="list_item"><a href="#trips" class="li_nav">Trips</a></li>
                <li class="list_item"><a href="#projects" class="li_nav">Projects</a></li>
                <li class="list_item"><a href="#donations" class="li_nav">Donations</a></li>
                <li class="list_item"><a href="#sponsors" class="li_nav">Sponsors</a></li>
                <li class="list_item"><a href="#contact" class="li_nav">Contact</a></li>
            </ul>
    </nav>

CSS

.main_nav {
  width: 100%;
  display: inline-block;
  background-color: white;
  padding-bottom: .5em;
}

.li_nav {
  color: #939598;
  -webkit-font-smoothing: antialiased!important;
  font-size: 1.05em;
  padding-right: 2.5em;
  display: inline;
}

.logo {
  min-width: 115px;
  max-width: 125px;
  padding-left: 2em;
  padding-top: .25em;
  padding-right: 3em;
  position: relative;
}

.list_item {
  display: inline;
}

Answer 1

这是你期待的

检查Jsbin

中的输出

修改你的css如下

  li{
list-style:none;
float:right;
margin-right:100px;
}

.list_item{
position:relative;
top:-35px;
}

Answer 2

＆＃13;

.main_nav {
  width: 100%;
  display: inline-block;
  background-color: white;
  padding-bottom: .5em;
}

li {
    list-style: none;
    float:left;
}
li .li_nav{
  color: #939598;
  -webkit-font-smoothing: antialiased!important;
  font-size: 1.05em;
  padding-right: 2.5em;
  display:block;
  line-height:50px
  
}

.logo {
  padding-left: 2em;
  padding-right: 3em;
  position: relative;
}

＆＃13;

<nav class="main_nav">
    <ul>
        <li class="logo"><a href="#home"><img alt="logo" src="http://placehold.it/50x50"></a></li>
        <li class="list_item"><a href="#about" class="li_nav">About Us</a></li>
        <li class="list_item"><a href="#trips" class="li_nav">Trips</a></li>
        <li class="list_item"><a href="#projects" class="li_nav">Projects</a></li>
        <li class="list_item"><a href="#donations" class="li_nav">Donations</a></li>
        <li class="list_item"><a href="#sponsors" class="li_nav">Sponsors</a></li>
        <li class="list_item"><a href="#contact" class="li_nav">Contact</a></li>
    </ul>
</nav>

＆＃13;

对于水平对齐中心，取决于您的图像大小并相应地更改行高

Answer 3

将float：right属性添加到您的班级＆＃34;徽标＆＃34;

.logo{
float:right;
}

还要添加类＆＃34; list_item＆＃34;标志李容器

导航栏中的徽标正在推动它旁边的li

3 个答案: