How do I center my logo image to another div in CSS horizontally and vertically?


Tags: html,css,navigation,graphical-logo

Problem :

I need help positioning a logo horizontally center. It also needs to be centered vertically to the top of my links div. Can someone help me?

I'd like my logo to look like this: enter image description here

Below is my HTML and CSS:

HTML - http://codebin.org/view/199faa14

<div id="container">

      <div id="logo">
      <img src="images/images/logo.gif" />
      </div>

      <div id="navigation">
      navigation
      </div>

      <div id="header">
      </div>

      <div id="line">
      </div>

      <div id="content">
      content
      </div>

    </div>

CSS - http://codebin.org/view/dda88d94

body {
background: url(../images/images/bg_page.gif) center center;
}

#container {
width: 940px;
margin: 0 auto;
}

    #header {
    height: 281px;
    background: url(../images/home/header.gif) top center;
    position: relative;
    }

    #logo {
    position: absolute;
    z-index: 2;
    top: 0px
    height: 214px;
    margin: 10px auto 0 auto;
    }

    #navigation {
    position: relative;
    height: 40px;
    background: #fff;
    margin-top: 100px
    }

    #content {
    height: 541px;
    background: url(../images/home/bg_body.png) top center;
    position: relative;
    }

    #line {
    height: 4px;
    background: url(../images/home/line.gif) top center;
    position: relative;
    }


Solution :

try something like this before using javascript!

.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%; 
margin-left: -150px;
margin-top: -150px;
}

or this!

.image_container {
   width: 300px;
   height: 300px;
   background: #eee;
   text-align: center;
   line-height: 300px;
 }

.image_container img {
   vertical-align: middle;
 }

    CSS Howto..

    How to create a cross with pure css [duplicate]

    How do i position a div relative to the window page (responsive css)

    How to adjust a div to not move when other sibling is faded out

    Using CSS, how can I change the alignment of a click-to-open UL menu?

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    How to change SVG color (when using the SVG as background in CSS)

    jQuery toggle slides DIV up and down, but UL content animates left to right. How can I make the content slide up and down?

    Showing responsive menu link that is not shown in regular navigation menu

    How to hide text behind image

    How to add style to android app

    How to create a static footer in CSS?

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    How to write CSS for parent DIV needing height dictated by child DIVs that are also anchored bottom?

    How to change background-color of selected option in IE11?

    How do I set the offset of a div from the top of an outer div to be the same as the offset from the side of the outer div using only css?

    How to get 2 CSS files to work together? - Problem with !important overriding rules

    How to reset css in middle of html document?

    How to align text sideways using css transform

    How to run CSS text animation in a sequence. (one line of text after another)

    How to prevent content from being pushed down on appearance of floating menu in mobile display

    How to get a gravity effect in a CSS animation?

    How would I get an img element to render under a background-image in CSS

    CSS: How to put content between header and footer

    CSS how to make 100% height in this case

    How can I overlay an image in a fluid layout (zurb foundation)

    How to define CSS anchor text decoration for anchors in a specific container

    how to adjust the background color to the right height

    css: how to draw circle with text in middle?

    How to remove scrollbar in PrimeFaces dialog?

    how do I find out which skin Telerik's RADeditor is using by default?