水平导航栏中的文字（使用ul和li）不是垂直居中的

时间：2016-12-25 23:05:14

标签： html css navbar

更新稍微探讨一下后，我找到了一种方法，将span文字替换为div并设置此样式：

.navItem div {
    display: inline-block;
    vertical-align: middle;
}

不确定这是不是最好的方式......一切都很麻烦

我一直在尝试创建此导航栏，但我遇到的问题是其中的文字并非完全垂直居中：

enter image description here

＆＃13;
＆＃13; 
    .navBar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height:54px;
        background-color: #DADADA;
        color: white;
    }
    
    .navItem {
        display: inline;
        float: left;
        color: rgb(29, 29, 29);
        font-size: 14px;
        height: 54px;
    }
    
    .navItem a {
        display: block;
        height: 54px;
        padding-left: 10px;
        color: rgb(29, 29, 29);
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        transition: color .25s, background .25s;
        text-decoration: none;
    }
    
    .navItem img {
        vertical-align: middle;
    }
    
    .navIcon {
        height: 34px;
        width: 34px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
＆＃13; 
      <ul class="navBar">
        <li class="navItem">
          <a>
            <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
            <span>About</span>
          </a>
        </li>
        <li class="navItem">
          <a>
            <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
            <span>Updates</span>
          </a>
        </li>
      </ul>
＆＃13;
＆＃13;
＆＃13;

我也知道我的CSS可能看起来很滑稽。它包含至少3个不同来源的片段，介绍如何创建水平导航栏。

我在栏中以图标为中心时遇到了问题，所以你可以看到我只是手动将填充添加到图标以强制它到中心。

vertical-align: center什么都没做

2 个答案:

答案 0 :(得分：3)

如果你没有浮动li，那么你可以从他们那里做vertical-align。

＆＃13;
＆＃13; 
.navBar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 54px;
  background-color: #DADADA;
  color: white;
  line-height: 54px;
  /* to set li in the middle*/
}
.navItem {
  display: inline-block;
  color: rgb(29, 29, 29);
  font-size: 14px;
  vertical-align: middle;
  /* here it does what you look for */
  line-height: 1.2em;
  /* reset line-height to a nomal value */
}
.navItem a {
  display: block;
  /* whatever display you want */
  padding-left: 10px;
  color: rgb(29, 29, 29);
  text-align: center;
  /* why ? */
  cursor: pointer;
  transition: color .25s, background .25s;
  text-decoration: none;
}
.navItem img {
  vertical-align: middle;
  /* aside text */
}
.navIcon {
  height: 34px;
  width: 34px;
}
/* eventually */

.navItem a span {
  display: inline-block;
  vertical-align: middle;
}
＆＃13; 
<ul class="navBar">
  <li class="navItem">
    <a>
      <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
      <span>About</span>
    </a>
  </li>
  <li class="navItem">
    <a>
      <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
      <span>Updates</span>
    </a>
  </li>
  <li class="navItem">
    <a>
      <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
      <span>display on span <br/>can be useful too</span>
    </a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

同样，不使用行高（@PhiterFernandes），而只使用伪来设置问题中所述的高度的初始54px。

＆＃13;
＆＃13; 
.navBar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 54px;
  background-color: #DADADA;
  color: white;
}
.navBar:before {
  content: '';
  padding-top: 54px;
}
/* commun style */

.navBar:before,
.navItem,
.navItem img,
.navItem a span {
  vertical-align: middle;
  display: inline-block;
}
.navItem {
  color: rgb(29, 29, 29);
  font-size: 14px;
}
.navItem a {
  padding-left: 10px;
  color: rgb(29, 29, 29);
  transition: color .25s, background .25s;
  text-decoration: none;
}
.navIcon {
  height: 34px;
  width: 34px;
}
＆＃13; 
<ul class="navBar">
  <li class="navItem">
    <a>
      <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
      <span>About</span>
    </a>
  </li>
  <li class="navItem">
    <a>
      <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
      <span>Updates</span>
    </a>
  </li>
  <li class="navItem">
    <a>
      <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
      <span>display on span <br/>can be useful too</span>
    </a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

这是一个更干净的版本，包括CSS和HTML。当你拥有一个非常好的选择器（可能应该是一个ID，但这是另一个问题）时，没有理由在内部项目上使用类。它还使用变量大小调整，因此即使人们没有完全按照您希望它们用于缩放，大小调整等的方式使用它也能正常工作。

＆＃13;
＆＃13; 
.navBar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height:3.5em;
        background-color: #DADADA;
        color: white;
    }
    
    .navBar li {
        display: inline-block;
        color: rgb(29, 29, 29);
        font-size: 0.9em;
        margin: 0.2em;
    }
    
    .navBar li a {
        display: block;
        padding-left: 0.8em;
        color: rgb(29, 29, 29);
        text-align: center;
        cursor: pointer;
        transition: color .25s, background .25s;
        text-decoration: none;
    }
    .navBar li img {
        height: 2.5em;
        width: 2.5em;
      vertical-align: middle;
    }
.navBar li span {
  line-height: 3.5em;
  margin-left: .5em;
  }
＆＃13; 
<ul class="navBar">
        <li>
          <a>
            <img src="http://image.flaticon.com/icons/svg/297/297562.svg"><span>About</span>
          </a>
        </li>
        <li>
          <a>
            <img src="http://image.flaticon.com/icons/svg/297/297562.svg"><span>Updates</span>
          </a>
        </li>
      </ul>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题