HTML 页脚响应不完美对齐

Question

我正在尝试创建一个响应式网站。一切看起来都很棒，除了页脚，在移动 View 中内容似乎没有完美对齐。 这是屏幕截图。

这是桌面 View

这是移动 View

如您所见，一切都搞砸了。这是我的代码

<div id="footer" class="navbar navbar-default navbar-fixed-bottom">
            <div class="container-fluid">
                <div class="navbar-text pull-left">
                    <p id="color"> Supported By </p>
                </div>
                <div class="navbar-text pull-left">
                    <a href="http://www.kafd.jo/" target="_blank"><img class="img-responsive" src="Images/King-Abdullah-Fund-Development-Jordan-360-Panorma-Video.png" id="imageclass1"></a>
                </div>
                <div class="navbar-text pull-left">
                    <a href="http://visitjordan.com/" target="_blank"><img class="img-responsive" src="Images/Jordan-Tourism-Board-Visit-Jordan-Lolo.png" id="imageclass1"></a>
                </div>

                <div class="navbar-text" id="centered">
                    <a href="http://www.360mea.com/request-a-recording/" target="_blank"><img class="img-responsive" src="Images/Request-a-Recording-Jordan-360-Panorama.png" id="imagecenter"></a>
                </div>

                <div class="navbar-text pull-right">
                    <a href="http://www.oasis500.com/" target="_blank"><img class="img-responsive" src="Images/Oasis-500-logo-360.png" id="imageclass"></a>
                </div>
                <div class="navbar-text pull-right">
                    <a href="http://www.ayla.com.jo/" target="_blank"><img class="img-responsive" src="Images/Ayla-Logo.png" id="imageclass1"></a>
                </div>
                <div class="navbar-text pull-right">
                    <a href="http://www.manaseergroup.com/" target="_blank"><img class="img-responsive" src="Images/Manaser.png" id="imageclass2"></a>
                </div> 
                <div class="navbar-text pull-right">
                    <p id="color">Partners</p>
                </div>
            </div>
        </div>

对于 CSS

#centered {
    position: absolute;
    overflow: visible;
    left: 40%;
}
#imagecenter{
    max-width: 200px;
    max-height: 200px;
}
#imageclass1{
    max-width: 90px;
    max-height: 90px;
}
#imageclass2{
    max-width: 70px;
    max-height: 60px;
}

这是我在移动端的尝试

@media screen and (min-width: 400px) {
    body {
        overflow: auto;
    }
    .img-responsive {
        position:relative;
        max-width: 20%;
    }
    #color{
        font-size: 5px;
    }
    #footer{
        max-height: 200px;
    }
}

如果有比我这样做更简单的方法，我将不胜感激。 谢谢!

Answer 1

忘记每个元素上的左拉和右拉，使用 col 布局(col offset 将有助于居中的布局)。