CODEWITHSUNDEEP
css
viktor
viktor

Reputation: 1048

Image contained in div not centering with margin: auto

I have the following html and css code:

<!DOCTYPE HTML>
<html>
<head>
</head>

<body>

    <div class="wrapper">
        <header>
            <section class="top">
                <div id="quote"><a href="contact.html"><p>Request a quote</p></a></div>
                <div class="arrow"><img src="icons/top-icon.png" alt=""></div>
            </section>
</body>
</html>​​​​​​​​​​​​​​​​​​

a {
    font-size: 1.6em;
    color: #fff;
    text-decoration: none;
    }
.top {
    height: 3.2em;    
    width: 100%;
    background: rgb(255,214,94); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
    position: fixed;
    top: 0;
    left :0;
    z-index: 10;
    text-align: center;
    border-bottom: 1px solid #f9e555;
    -webkit-box-shadow: 0px 0px 8px #555;
    -moz-box-shadow: 0px 0px 8px #555;
    box-shadow: 0px 0px 8px #555;
    }
.top div#quote {
    width: 20em;
    background: rgb(254,252,234); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
    margin: 0 auto;
    }
.top div#quote p {
    color: #f2572a;
    height: 3.5em;
    font-size: 1.5em;
    padding: 0;
    margin: 0;        
    }
.top div#quote a {
    font-size: 1.1em;
    }
.top div#quote p:hover {
    color: #ed3419;
    }    
.arrow {
    display: inline-block;
    margin: 0 auto;
    border: 1px solid #000;
    position: relative;
    }

There are 2 problems here: the first one is that the "Request a quote div" is larger than the 3.2em defined in the css and the second one is that if I delete the text-aling: center in .top styling the image underneath the quote div will not stay centered. I have tried to position relative the .arrow div and position absolute the img icon, but it does not work as the div disappears completely. Any other ideas? ​

Upvotes: 0

Views: 6348

Answers (2)

Zeta
Zeta

Reputation: 105915

The "Request a quote" div is larger because its height is relative to its font size. em is based on the current width of the letter M (at least in classic typography). Since you change the font-size in your elements 3.2em in .top isn't the same as 3.2em in .top div#quote p.

Even if you won't change the font-size the values still differ (3.2em in .top, 3.5em in .top div#quote p).

You should get rid of all padding-tops, padding-bottoms, margin-tops and margin-bottoms instead and simply use height:100%.

HTML

<div class="wrapper">
    <header>
        <section class="top">
            <p class="quote"><a href="contact.html">Request a quote</a></p>
            <img class="arrow" src="icons/top-icon.png" alt="Arrow"></div>
        </section>
    </header>
</div>

CSS

a {
    color: #fff;
    text-decoration: none;
}

.top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 10;

    height: 3.2em;

    background: rgb(255,214,94); /* Old browsers */
    background: linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* W3C */    

    text-align: center;

    border-bottom: 1px solid #f9e555;
    box-shadow: 0px 0px 8px #555;
}

.top p.quote {
    width: 20em;
    height:100%;  

    padding: 0;
    margin: 0 auto;

    color: #f2572a;    
    font-size: 1.6em;
    line-height:2.1em;

    background: rgb(254,252,234); /* Old browsers */
    background: linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C */
}

.top p.quote a{
    color: #f2572a;
}

.top p.quote a:hover{
    color: #ed3419;
}    
.arrow {
    display: inline-block;
    margin: 0 auto;
    border: 1px solid #000;
    position: relative;
}

/* gradient and other vendor specific quirks */
.top{
    /* background rules */
    background: -moz-linear-gradient(top,  rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */

    /* vendor specific box shadows */    
    -webkit-box-shadow: 0px 0px 8px #555;
    -moz-box-shadow: 0px 0px 8px #555;
}

.top p.quote{    
    background: -moz-linear-gradient(top,  rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* IE10+ */    
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}

JSFiddle Demo

Upvotes: 2

You
You

Reputation: 23814

Since the .arrow element has a default width of 100%, setting margin: 0 auto has no effect horizontally. And since img is an inline element, it won't work on that either. You need to either set an explicit width on the .arrow element, or set display: block and margin: 0 auto on the img element.

Upvotes: 7

Related Questions