Question

这是一个愚蠢的问题，但我无法将导航上的图标与文本垂直对齐。我试图在底部对齐它们，但任何工作都有效。

如果我给<li>元素赋予高度，我可以使它工作，但我被告知它必须是“自然的”，所以我不能给<li>高度元素。我可以用位置：相对并给它顶部的一些像素，但同样，我被告知它应该“更自然”，而不是给顶部的特定像素数....

我已经找到了旧帖子的可能解决方案，有些人说使用display-block然后垂直对齐，但它不起作用。

有人能看出我做错了吗？

谢谢

这里有一个jsfiddle：http://jsfiddle.net/3uwzcspn/

HTML：

    <div class="" id="">      
      <ul class="nav navbar-nav">
        <li>
          <a href="">
            <img src="http://s18.postimg.org/86tb8kv1h/icon1.png" alt=""/>
            <span>Manufracturer<span> </span>Approved</span></a>
        </li>
        <li>    
          <a href="">
            <img src="http://s11.postimg.org/aola8nkdr/icon2.png" alt=""/>
            <span>Customer 1st<span> </span>We'll visit you</span></a>
        </li>
        <li>
          <a href="">
            <img src="http://s30.postimg.org/5e6fr1p99/icon3.png" alt=""/>
            <span>Excess<span> </span>SAFE</span></a>
        </li>
        <li>
          <a href="">
            <img src="http://s30.postimg.org/a2mfm8efx/icon4.png" alt=""/>
            <span>Friendly Form- <span> </span>Free Help</span></a>
        </li>
        <li>    
          <a href="">
            <img src="http://s13.postimg.org/t1bjf5eur/icon5.png" alt=""/><span>FREE-<span> </span>Accident Management</span></a>
        </li>
      </ul>
    </div>     
  </div>
</nav>

的CSS：

body {
    font-family:'Droid Sans', sans-serif;
}
/*unwanted default Bootstrap*/
.navbar-collapse{
  padding:0;
  margin:0;
}
.navbar-nav {
    width:100%;
    float:none;
    /*displaying inline block makes a little margin*/
    margin-top: 0.2%;
    margin-bottom: 0.1%;
}
.navbar-default {
    border:none;
    margin-bottom: 0;
    border-radius:0;
    box-shadow:none;
    background:none;
}
.navbar-brand {
    padding:0;
}

/**Top Navigation**/
.wrapperOrg {
     background: #f9540a;
}

#topNavigation {
   background: #f9540a;
   font-weight:700;
   font-size:1.2em;
}
#topNavigation li {
    border-right:2px solid #d93700;
    box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
    -webkit-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
   -moz-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5); 
}
#topNavigation li a {
    color: #fff;
    padding: 3%;
}
#topNavigation .navbar-nav li a:hover {
    color: #808080;
}
#topNavigation li a img {
  float: left;
  clear: left;
  display:inline-block;
  vertical-align:bottom;
}
#topNavigation li a span {
    display:inline-block;
}
#topNavigation li a span:last-child {
    display:block;
}
/*for better responsive*/
#topNavigation li:first-child {
    width:21%;
}
#topNavigation li:nth-child(2){
    width:19%;
}
#topNavigation li:nth-child(3){
    width:13%;
}
#topNavigation li:nth-child(4){
    width:20%;
}
#topNavigation li:last-child {
    width:27%;
    border:none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

Answer 1

一个建议（我无法看到它，因为你的图片在我工作的地方被屏蔽了），就是给li标签一个 line-height 然后使用 vertical-对齐图像。

Answer 2

这是你在找什么？ 以大视图展开以查看输出

只需提供#topNavigation li a span:last-child{ line-height: 15px;}

＆＃13;

body {
    font-family:'Droid Sans', sans-serif;
}
/*unwanted default Bootstrap*/
.navbar-collapse{
  padding:0;
  margin:0;
}
.navbar-nav {
    width:100%;
    float:none;
    /*displaying inline block makes a little margin*/
    margin-top: 0.2%;
    margin-bottom: 0.1%;
}
.navbar-default {
    border:none;
    margin-bottom: 0;
    border-radius:0;
    box-shadow:none;
    background:none;
}
.navbar-brand {
    padding:0;
}

/**Top Navigation**/
.wrapperOrg {
     background: #f9540a;
}

#topNavigation {
   background: #f9540a;
   font-weight:700;
   font-size:1.2em;
}
#topNavigation li {
    border-right:2px solid #d93700;
    box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
    -webkit-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
   -moz-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5); 
}
#topNavigation li a {
    color: #fff;
    padding: 3%;
}
#topNavigation .navbar-nav li a:hover {
    color: #808080;
}
#topNavigation li a img {
  float: left;
  clear: left;
  display:inline-block;
  vertical-align:bottom;
}
#topNavigation li a span {
    display:inline-block;
}
#topNavigation li a span:last-child {
    display:block;
    line-height: 15px;
}
/*for better responsive*/
#topNavigation li:first-child {
    width:21%;
}
#topNavigation li:nth-child(2){
    width:19%;
}
#topNavigation li:nth-child(3){
    width:13%;
}
#topNavigation li:nth-child(4){
    width:20%;
}
#topNavigation li:last-child {
    width:27%;
    border:none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
     <nav id="topNavigation" class="navbar navbar-default" role="navigation">
          <div class="container-fluid">
            
            <div class="" id="">      
              <ul class="nav navbar-nav">
                <li>
                  <a href="">
                    <img src="http://s18.postimg.org/86tb8kv1h/icon1.png" alt=""/>
                    <span>Manufracturer<span> </span>Approved</span></a>
                </li>
                <li>	
                  <a href="">
                    <img src="http://s11.postimg.org/aola8nkdr/icon2.png" alt=""/>
                    <span>Customer 1st<span> </span>We'll visit you</span></a>
                </li>
                <li>
                  <a href="">
                    <img src="http://s30.postimg.org/5e6fr1p99/icon3.png" alt=""/>
                    <span>Excess<span> </span>SAFE</span></a>
                </li>
                <li>
                  <a href="">
                    <img src="http://s30.postimg.org/a2mfm8efx/icon4.png" alt=""/>
                    <span>Friendly Form- <span> </span>Free Help</span></a>
                </li>
                <li>	
                  <a href="">
                    <img src="http://s13.postimg.org/t1bjf5eur/icon5.png" alt=""/><span>FREE-<span> </span>Accident Management</span></a>
                </li>
              </ul>
            </div>     
          </div>
        </nav>

＆＃13;

Answer 3

从display:block移除span以使垂直对齐工作，因为它需要内联元素，我们可以使用display:inline-block，现在您的li已经设置宽度使文本无法正确展开，我们将其删除。最后，您不需要float:left图像，因为它会阻碍垂直对齐。

Example

代码：

#topNavigation li a img {

  display:inline-block;
  vertical-align:bottom;
}

#topNavigation li a span {
    margin-left: 5px;
    display:inline-block;
    width: 80px;
}

/*for better responsive*/

无法将图像与导航上的文本垂直对齐 - 显示为块的文本

3 个答案: