CODEWITHSUNDEEP
htmlcss
Jess McKenzie
Jess McKenzie

Reputation: 8385

Align Vertical and Horizontal Align

I am trying to align a box VxH Center but I seem to be getting it just a bit off:

HTML:

<div id="wrapper">
        <header>
            <div id="logoWrapper">
                <div class="logo">Logo Here </div><!-- Logo End -->
            </div><!-- Logo Wrapper -->
    </header>
</div><!-- Wrapper End -->

CSS:

![#wrapper{
    width:955px;
    margin:auto;
}

html body{
    background:#F1FF29;
}

#logoWrapper{
    width:429px;
    height:179px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-50px;
}
.logo{
    display:block; 
    background:red;
    width:429px;
    height:179px;
}]

Image: https://i.sstatic.net/rZ2ng.png

Upvotes: 1

Views: 458

Answers (1)

Beno
Beno

Reputation: 4753

Change your margins for #logoWrapper to these values:

margin-left:-215px;
margin-top:-85px;

They need to be half the width and height of your logo.

jsfiddle

EDIT:

Also, I would suggest you put these 'reset' styles in:

html, body{
    background:#F1FF29;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

Upvotes: 1

Related Questions