如何将页脚内容居中以容纳移动设备查看

当我的媒体查询被调用时，我有一个有趣的问题，即获取页脚区域内的内容，堆栈在页脚中心。虽然我可以在移动视图测试处于横向方向时调整位置，但当我切换到纵向时，一切都关闭。无论以哪种方式在设备上查看页脚部分（横向或纵向），我都会前后对战以使内容居中。这是我对一般的页脚代码片段：如何将页脚内容居中以容纳移动设备查看

<!-- FOOTER BEGINS HERE --> 
<div id="footer" class="bottom-menu bottom-menu-inverse" style="background-color: #6e6e6e; margin-top: 45px;"> 
    <div class="container"> 
     <div class="row"> 

      <div class="col-md-2 navbar-brand" style="padding: 0; margin-top: 45px;"> 
       <a href="#" style="font-family: 'Edwardian Script ITC'; font-size:25px">Young Exekutive</a> 
      </div> 

      <div class="col-md-4" style="width:443px;"> 
       <ul class="bottom-links"> 
        <li><a href="#" onmousedown="resetScroller('home');">home</a></li> 
        <li><a href="#" onmousedown="resetScroller('about');">about</a></li> 
        <li><a href="quotes.html">+quotes</a></li> 
        <li><a href="gallery.html">gallery</a></li> 
        <li><a href="/YoungMedia/videos.html">videos</a></li> 
        <li><a href="shop.html">shop</a></li>      
        <li><a href="#" onmousedown="resetScroller('links');">links</a></li> 
        <li><a href="#" onmousedown="resetScroller('contact');">contact</a></li> 
       </ul> 
      </div> 

      <div class="col-md-2" style="width:375px;"> 
       <ul class="bottom-icons" style="list-style: none">  
        <li><a target="_blank" href="https://facebook.com/" class="fa fa-facebook-square"></a></li> 
        <li><a target="_blank" href="https://twitter.com/" class="fa fa-twitter"></a></li>       
        <li><a target="_blank" href="https://linkedin.com/" class="fa fa-linkedin-square"></a></li> 
        <li><a target="_blank" href="https://instagram.com/" class="fa fa-instagram"></a></li> 
        <li><a target="_blank" href="https://pinterest.com/" class="fa fa-pinterest-square"></a></li> 
       </ul> 
       </div> 

      </div> 
     </div> 
    </div>

下面是在我的CSS媒体查询匹配的部分：

/* For Landscape Orientation */ 

@media(max-width: 768px) {  
#footer { 
    overflow: hidden; 
    width: 100%; 
    max-height:100%;   
    text-align: center; 
} 

ul li a { 
    margin: -50px;   
} 

div.col-md-2.navbar-brand { 
    font-size: small; 
    bottom: 30px; 
}  
} 

/* For Portrait Orientation */ 

@media(max-width: 480px) { 
#footer { 
    overflow: hidden; 
    width: 100%; 
    max-height:100%; 
} 

ul li a { 
    margin: 150px; 
    font-size: small; 
} 

div.col-md-2.navbar-brand { 
    padding: 0; 
    font-size: small; 
    bottom: 20px; 
    margin-left: 75px; 
} 
}

桌面浏览器的页脚是好的，但看到我的图片上传的移动使用ResponiView插件Chrome浏览器是如何变成了，用不同的设备：

enter image description here

我缺少的是与否d在这里的人？我玩过CSS类和属性，但找不到解决方案。我知道这些链接/元素可以叠加，但我无法完成。

来源

2015-01-12 Jo' vani7

请与这个CSS

@media screen and (max-width: 768px) {  
#footer { 
    overflow: hidden; 
    width: 100%; 
    max-height:100%;   
    text-align: center; 
} 

ul li a { 
    margin: -50px;   
} 

div.col-md-2.navbar-brand { 
    font-size: small; 
    bottom: 30px; 
} 
     .col-md-4 { 
     width:100% !important} 

     #footer li { 
     list-style:none} 
     ul, li { 
     margin:0 ; padding:0} 
     div.col-md-2.navbar-brand { 
    bottom: 20px; 
    font-size: small; 
    margin-left: 0 !important; 
    padding: 0;margin-top: 2px !important; 
} 

ul li a { 
    font-size: small; 
    margin: 5px 0 !important; 
} 
     #footer { 
     padding-bottom:10px;} 
} 


@media screen and (max-width: 480px) { 
#footer { 
    overflow: hidden; 
    width: 100%; 
    max-height:100%; 
}

}

替换此

来源

2015-01-12 09:11:28 anji

如何将页脚内容居中以容纳移动设备查看

回答

相关问题