Question

I am doing a website in wordpress. And under the navigation I have container(id=”cover_photo”) for image(id=”cover_photo_image).I center it with margin but I want to move it down, and center it in the container, but the container follow if I put margin on it.

HTML

    <div id="cover_photo">
        <p id="cover_photo_image">
        </p>
    </div>

CSS

#cover_photo {
    width: 100%;
    height: 278px;
    background-color: #6b0c0b;
    box-shadow: inset 0px 0px 3px 0px #888, 0px 0px -3px 0px #888;
}

p#cover_photo_image {
    width: 821px;
    height: 172px;
    display: block;
    margin: 0 auto;
    margin-top: 6px;
    background-image: url(images/cover_photo.png);
}

Answer 1

Plopped your code into a fiddle and saw what you mean. The problem is that you haven’t set positioning for #cover_photo or #cover_photo_image. The outer element needs to be relative, the inner needs to be an absolute.

#cover_photo {
position: relative;
}

p#cover_photo_image {
position: absolute;
}​

I changed the sizes so it would fit into the preview, and if you try adjusting the margin values it should move around and not move the #cover_photo container.

http://jsfiddle.net/ESCNm/

Just in case you’re are looking to automatically vertically and horizontally align an element within an element, there are a LOT more methods that manual positioning. Manual positioning is such a hassle, and I try to avoid absolutes whenever possible.

Here an article about it: http://www.vanseodesign.com/css/vertical-centering/