Reputation: 3257
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);
}
Upvotes: 0
Views: 2729
Reputation: 1
About vertical and horizontal centering.
You can use Flex.
Please add the following code
#cover_photo {
display: flex;
justify-content: center;
align-items:center;
}
p#cover_photo_image {
border: 1px solid black;
background-repeat: no-repeat;
background-image: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-
sidebar-promo.svg?v=47faa659a05e);
background-size: contain;
background-position: center;
}
This should be the effect you want. enter image description here
Upvotes: 0
Reputation: 2712
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.
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/
Upvotes: 1