css - 如何将页脚内容居中以适应移动查看

Question

当我的媒体查询被调用时，我遇到了一个有趣的问题，即获取页脚区域内的内容以堆叠在页脚的中心。虽然我可以在移动 View 测试处于横向时调整定位，但当我切换到纵向时，一切都关闭了。无论在设备上以何种方式查看页 footer 分(横向或纵向)，我都在反复努力使内容居中。这是我的一般页脚代码片段:

<!-- 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;
}
}

桌面浏览器的页脚很好，但请看我上传的移动端图片，不同设备使用 Chrome 的 ResponiView 插件:

伙计们，我错过了什么或没有做什么？我玩过 CSS 类和属性，但找不到解决方案。我知道这些链接/元素可以堆叠，但我做不到。

Answer 1

请用这个 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%;
}