image display on mobile will not center

StackOverflow https://stackoverflow.com/questions/21803794

Question

I have this code for my header.php

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Navigation Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function() {
            var pull        = $('#pull');
                menu        = $('nav ul');
                menuHeight  = menu.height();

            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
    </script>
</head>
<body>

<div class="desktop">
<a href="index.php">
<img border="0" class="logo" src="/images/logo.png" width="15%" height="20%" /></a> <font size="15%"><div class="BDtext">title<br> Description</font></div><br>
</div>

<div class="mobile">
<a href="index.php">
<img border="0" class="mobilogo" src="/images/logo.png" width="15%" height="20%" /></a>
</div>

    <nav class="clearfix">
        <ul class="clearfix">
            <li class="home"><a href="index.php">Home</a></li>
            <li class="about"><a href="about.php">About</a></li>
            <li class="me"><a href="me.php">About Me</a></li>
            <li class="sessions"><a href="sessions.php">Sessions</a></li>
        </ul>
        <a href="#" id="pull">Menu</a>
    </nav>
</body>
</html>

and this one in my style.css:

body {
    background-color: #ece8e5;
}

.logo{
float: left;
}

.BDtext {
text-align: center;
}


/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Menu */

#sub-header ul li:hover,
body.home li.home,
body.Ben li.Ben,
body.about li.about,
body.sessions li.sessions { background-color: #000;}            /* Current Page Background Colour */

nav {
    height: 40px;
    width: 100%;
    background: #455868;                                    /* Menu Background Colour */
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #283744;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 40px;
}
nav li {
    display: inline;
    float: left;
}
nav a {
    color: #fff;
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
}
nav li a {
    border-right: 1px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #8c99a4;         /* Hover Over A Page Background Colour */
}
nav a#pull {
    display: none;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
  nav { 
  height: auto;
  }
  nav ul {
  width: 100%;
  display: block;
  height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #283744;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}


@media only screen and (max-width : 600px) {
.desktop {display:none;}

.mobilogo{
margin-right: 45%;
width:50%;
height: 50%;
}
}

@media only screen and (min-width : 601px) {
.mobile {display:none;}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {

    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}

/* End Menu */

my problem is.

my .mobilogo code in my CSS will not center the image.

I need this image to appear in the center of the page and not be aligned to the left.

please can someone help tell me what is holding it back?

Was it helpful?

Solution

.mobile class could have text-align:center; if you don't want to use the text-align try the below:

Also you can give .mobilogo width and have margin:0 auto; to center it.

.mobilogo{
    margin:0 auto;
    width:50%;
    height: 50%;
}

In order for the width and height to work with percentages you need to give the parent elements width and height.

OTHER TIPS

Make your .mobilogo class block and give it margin: 0 auto like this. Even though it has a width of 50% you'll have to make it a block element to center it with margin: 0 auto, or else you'll have to specify the width in pixels.

Like this: 

.mobilogo {
margin: 0 auto;
display: block; 
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top