HTML页脚响应不完全对齐

Question

I'm trying to create a responsive website. Everything looks great except for the footer when in mobile view the content dont seem to align perfectly. Here are screenshots.

This is the desktop view

This is the mobile view

As you can see everything is messed up. Here's my code

<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>

And for the 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;
}

And here's my attempt on mobile view

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

If there's an easier approach than the way I did it, I would be very thankful. Thank you!

Answer 1

Bootstrap provides easy ways for designing responsive sites. You just add classes to your divs and bootstrap's css will do the job! You can find it here: http://getbootstrap.com/

Answer 2

忘记在每个元素上向左拉右，并使用col的布局（col偏移将对居中的元素有所帮助）。