真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

  
    
      
        
          
        
        
          切換導(dǎo)航
          
          
          
        
      

帶著這種想法，我設(shè)定了如下屬性。

#h-cell-1 a{
  display:inline-block;
  height:97px;
  margin-left:32px;
  font-size:17.8px;
  text-decoration: none;color:white;
}

為此怎么實現(xiàn)垂直居中呢？

第一點想到的是position定位了

既然要實現(xiàn)相對于a超鏈接的position，那么必須引入一個span盒子了。

推薦

然后增加

#h-cell-1 li{height:97px;}
#h-cell-1 a{
  display:inline-block;
  position:relative;
  width:40px;
  height:97px;
  margin-left:32px;
  border-bottom:2px solid #20B176;
  font-size:17.8px;
  text-decoration: none;color:white;
}
#h-cell-1 a span{width:40px;}

就可實現(xiàn)垂直居中了！

但另外一個問題又接著出現(xiàn)了，在galaxy5的小屏幕下，下拉菜單的li間距太大，不美觀。

又該怎么辦呢？

這個是在28號晚上想到方法的。靈感也是看了其他同學(xué)的日報。他們提到媒體查詢。

好，什么是媒體查詢。建議百度。這里不做介紹。

媒體查詢是吧，好那么久好辦了。

@media only screen and (max-width: 700px) {
#h-cell-1 li{height:auto;}
#h-cell-1 a{height:20px;width:100%;margin:0;padding:0;overflow:hidden;}
#h-cell-1 a span{height:auto;}
}

ok，完美。

但是還有問題啊！

圖標(biāo)，和按鈕原本是不垂直居中的??！那這個怎么搞！

  
    
  
  
    切換導(dǎo)航
    
    
    
  

他們不是都在navbar-header的盒子里嗎？

那不能通過flex兩端對齊來實現(xiàn)垂直嗎？

試試看

加了個

.df-jcsbc{display:flex;justify-content: space-between;align-items: center;}

但是效果不理想??！總體來說，.navbar-brand 和navbra-toggle實現(xiàn)了垂直居中。

那，怎么辦呢？

我是直接弄

.navbar-header{position: relative;height:97px;}
.navbar-brand{
padding:0;

  }
.navbar-header img{position:absolute;
  left:20px;}
.navbar-header button{position:absolute;
  margin:0;
  right:20px;}

padding和margin來使他們讓出位置來的。

然后通過定位稍微調(diào)了點左右距離。

最后就可以實現(xiàn)垂直居中了。

關(guān)于“BootStrap如何實現(xiàn)響應(yīng)式導(dǎo)航欄垂直平分和下拉列表的居中問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。