Horizontally aligning a div-element within another div-element can be achived with margin: 0 auto; as long as they both have a width-property other than auto, but this does not apply for vertical alignment.
How can you vertically align a div within another div?
There are a number of different approaches to this, based on various ideas. Given that the element has a fixed height (in px, % or what have you), the best solution I've found so far is based on the following principle:
Give the parent div position: relative; and the child div position: absolute;, to make the child absolutley positioned in relation to the parent.
For the child, set top, bottom, left and right to 0. Given that the child also has a fixed width and height that is less than the size of the parent, this will push the browser into an impossible situation.
In comes margin: auto; on the child, as the browsers savior. The browser can now add enough margin on all sides to let the child-element keep its size, yet still fill out the entire parent as forced by top, bottom, left and right set to 0.
TADAAA! The element gets vertically and horizontally aligned within the parent.
Markup
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 200px;
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
A working example
http://jsfiddle.net/sg3Gw/
I find it easiest to use display:table-cell; vertical-align:middle; here's a jsfiddle
<style>
.a {
border:1px solid red;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
}
</style>
<div class="a">
<div>CENTERED</div>
</div>
Related
I'm making a pong clone using HTML/CSS/Js. I've set a div element to act as a border for the game, just to keep things in a confined space. How do I get elements (for example, a scoreboard) to act relative to their parent element? For example, if I tell the child to move 50% left, it moves to the center of the parent-div, and NOT to the center of the web-page. Basically I want the child confined by the dimensions of their parent (haha). It seems like
child-div {
position:relative;
}
in CSS would do the trick, but it's not...maybe it's because I'm developing in CodeAcademy's IDE?
position:relative means relative to itself not parents/children etc. It seems likely that you want relative on the parent and possibly absolute on the children. Without code, it's hard to help much further
Here's a quick demo for you.
.container {
width: 80%;
height: 250px;
margin: 0 auto;
position: relative;
border: 4px solid green;
}
.scoreboard {
width: 200px;
height: 50px;
background: lightblue;
border: 2px solid grey;
position: absolute;
top: 10px;
/* just for a bit of space */
left: 50%;
/*almost centered*/
margin-left: -100px;
/* half of known width */
}
<div class="container">
<div class="scoreboard"></div>
</div>
Note...there are other centering methods for absolutely positioned divs depending on whether the width is known and browser support requirements
left: 50%; does not center an element...it moves the element's top/left corner to the center of the containing element. You have to move it back half of it's width (if known)...see above.
One final point....positioned elements are not constrained to their ancestor elements but rather positioned in relation to them. It's quite common to have positioned elements outside the bounds of parents.
I have two divs that I would like to place one on top of the other, so I can create a tab system in an applet I am making. These two divs reside within a parent div, that uses auto height because I do not know the exact height of the other two divs (both children will be of same height). I can position the two divs one on top of the other with absolute positioning when the parent uses relative positioning, but the auto height doesn't respond (most likely because of absolute positioned children) creating a border line of an empty div instead of a wrapper with elements inside.
See problem here: http://jsfiddle.net/h5bjt69s/
<div id = "parent">
<div id = "redDiv"></div>
<div class = "clearfix"></div>
<div id = "blueDiv"></div>
</div>
I tried modeling a solution from this, but I believe the auto height throws things off.
Position absolute but relative to parent
How can I wrap the two divs with the parent div and still maintain the overlaying of the two children?
This:
both children will be of same height
Actually solves your problem:
Position one div using position: static; it will determine the height of the parent
Position the other div(s) using position: absolute (it will appear on top)
Updated Fiddle
Here are the changes
#blueDiv {
background-color: blue;
width: 100%;
height: 50px;
position: relative;/*changed*/
top: 0px;
left: 0px;
z-index:2;/*added*/
opacity:0.7;
}
DEMO
Another Style
#blueDiv {
background-color: blue;
width: 100%;
height: 50px;
/*position: relative;removed*/
opacity:0.7;
}
#redDiv {
background-color: red;
width: 100%;
height: 50px;
visibility: visible;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;/*added*/
}
Updated
I have a css problem. Im trying to vertically center the text in a div, which is overlaying another div, but the text won't budge.
EDIT: Here's teh JSFiddle url: http://jsfiddle.net/wgSEw/3/
The html is as follows:
<div id="footer-top">
<div id="footer-top-left">
<div id="footer-logo">
</div>
</div>
<div id="footer-top-transition"></div>
<div id="footer-top-right"></div>
<div id="footer-top-bullets">
<div id="site-map" class="footer-bullet">
<img src="<?php echo BASE_IMG_URL . 'bulletlight.png'; ?>" alt="some_text">
<span class="footer-bullet-text">Site Map</span>
</div>
<div id="report-issue" class="footer-bullet">
<img src=<?php echo BASE_IMG_URL . 'bulletlight.png'; ?> alt="some_text">
<span class="footer-bullet-text">Report an Issue</span>
</div>
<div id="submit-professor" class="footer-bullet">
<img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
<span class="footer-bullet-text">Submit Professor</span>
</div>
<div id="submit-school" class="footer-bullet">
<img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
<span class="footer-bullet-text">Submit a School</span>
</div>
</div>
</div>
and the current css is:
#footer-top{
position: relative;
width: 960px;
height: 63px;
float: left;
background-image:url('midtilefooter.png');
}
#footer-top-left{
width: 466px;
height: 63px;
float: left;
}
#footer-logo{
width: 265px;
height: 63px;
float: left;
background-image:url('leftlogo.png');
}
#footer-top-transition{
width: 27px;
height: 63px;
float: left;
background-image: url('midblacktransition.png');
}
#footer-top-right{
width: 467px;
height: 63px;
float: left;
background-color: black;
}
#footer-top-bullets{
position: absolute;
float: left;
width: 960px;
height: 63px;
margin-left: 265px;
}
.footer-bullet{
float: left;
height: 63px;
width: 173px;
color: white;
}
.footer-bullet-text{
height: 63px;
color: white;
top: 50%;
margin-top: -31px;
vertical-align: middle;
}
This essentially, creates a basic background for the top part of the footer, then overlays a div of bullets onto that background, so that it overlays without obscuring or messing with the background. The bullets are displaying in the correct places and, the text is correctly placed horizontally, but I can't get it to center vertically at all. Any help would be appreciated, as well as any general advice on css, Im pretty new to it, and it's giving me a run for my money. Thansk a lot!
to center a div vertical
html
<div id="parent">
<div id="child">Content here</div>
</div>
css option 1
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
We begin by positioning both parent and child divs. Next we set the
top and left values of the child to be 50% each, which would be the
center of the parent. However this sets the top left corner to be in
the center so we’re not done.
We need to move the child up (by half its height) and to the left (by
half its width) so it’s center is what sits in the center of the
parent element. This is why we need to know the height (and here the
width) of the child element.
To do that we give the element a negative top and left margin equal to
half its height and width.
Unlike the first 2 methods this one is meant for block level elements.
It does work in all browsers, however the content can outgrow its
container in which case it will disappear visually. It’ll work best
when you know the heights and widths of the elements.
css option 2
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
The idea with this method is to try to get the child element to
stretch to all 4 edges by setting the top, bottom, right, and left
vales to 0. Because our child element is smaller than our parent
elements it can’t reach all 4 edges.
Setting auto as the margin on all 4 sides however causes opposite
margins to be equal and displays our child div in the center of the
parent div.
Unfortunately the above won’t work in IE7 and below and like the
previous method the content inside the child div can grow too large
causing it to be hidden.
css option 3
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
In the css above I’ve set top and bottom paddings on both elements.
Setting it on the child will make sure the contents in the child will
be vertically centered and setting it on the parent ensures the entire
child is centered within the parent.
I’m using relative measurements to allow each div to grow dynamically.
If one of the elements or it’s content needs to be set with an
absolute measurement then you’ll need to do some math to make sure
things add up.
For example if the parent was 400px in height and the child 100px in
height we’d need 150px of padding on both the top and bottom.
150 + 150 + 100 = 400
Using % could throw things off in this case unless our % values
corresponded to exactly 150px.
This method works anywhere. The downside is that depending on the
specifics of your project you may need to do a little math. However if
you’re falling in line with the idea of developing flexible layouts
where your measurements are all relative you can avoid the math.
Note: This method works by setting paddings on the outer elements. You
can flip things and instead set equal margins on the inner elements. I
tend to use padding, but I’ve also used margins with success. Which
you choose would depend on the specifics of your project.
source
The final ancestor div in my page needs a margin on all four sides, to give it a panel effect. Here is my code:
CSS:
html, body {
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#bibletree {
width: 20%;
float: left;
height: 100%;
}
.inner { /*this is the div that I need a margin around, so it is by 10px of the #bibletree div on all sides, including the bottom.*/
overflow: auto;
}
HTML:
<div id="wrapper">
<div id="bibletree">
<div class="inner">my content here, both short and long</div>
</div>
</div>
As you probably guessed, there is a lot more going on here than what is written. I have several columns with divs that all need this margin for the panel effect on the .inner div. Thanks for any help.
BTW, I have tried absolute positioning and it only positions based on the window, not on the parent element, even if I set the parent to position: relative.
If you set .inner to width 100% and add a margin, it will be wider than its container. You can set a padding or a border instead. For example, you can add a white or transparent border of 10px.
Another option is to make #bibletree position relative, then make .inner position absolute and specify top, bottom, right and left:
.inner {
bottom: 10px;
top: 10px;
left: 10px;
right: 10px;
position: absolute;
}
This will make it the same size as #bibletree, minus 10px on every side.
Margin:10px is working right?? you need not no specify the width for inner div, as div is already has block option. check here updated demo http://jsfiddle.net/QShRZ/5/
Let's say I want to place an element in the center of my viewport for use as a popup message. It should fulfil the following:
Element should remain centered (both horizontally and vertically) within the browser, even if element size changes dynamically
Element should stay centered if browser is resized
No Javascript is allowed
Would still work on IE7
Is there a nicer way of achieving this without resorting to the table-based solution below?
<table style="position:absolute;width:100%;height:100%">
<tr>
<td align="center">
<span id="centeredContent">I always remain centered</span>
</td>
</tr>
</table>
The best solution (in my opinion) is to use absolute positioning to place the top left of the element at 50%/50%, then shoving the element back into the centre using negative margins. The only drawback is that you have to specify a width and height of the element. Here's an example:
HTML:
<div id="centerme">
Hello, world!
</div>
CSS:
#centerme
{
position: absolute;
left: 50%;
top: 50%;
/* You must set a size manually */
width: 100px;
height: 50px;
/* Set negative margins equal to half the size */
margin-left: -50px;
margin-top: -25px;
background-color: cornflowerblue;
}
Here's a demonstration on jsfiddle: http://jsfiddle.net/UGm2V/
If you really require the centred content to have a dynamic height, there's a more advanced solution. Be ware that it won't work in older IE browsers. The HTML goes as follows:
<div id="outter-container">
<div id="inner-container">
<div id="centred">
<p>I have a dynamic height!</p>
<p>Sup!</p>
</div>
</div>
</div>
The outter container is required to cover the width and height of the page. It's a block element with absolute positioning.
The inner container is actually a table! That's decided by the display: table css property. The win here is that you don't actually need any table HTML.
The #centred div is the last required element. It still covers 100% of the page's width and height, but anything placed inside it will be centred both vertically and horizontally. This is the css you need, with explanations:
/*
An outter container is needed because the table
won't cover the page width and height on it's own
*/
#outter-container
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
/*
The inner container is a table which is set to
cover the width and height of the page.
*/
#inner-container
{
display: table;
width: 100%;
height: 100%;
}
/*
This table cell will cover 100% of the page width
and height, but everything placed inside it will
be placed in the absolute centre.
*/
#centred
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
And of course, here's a jsfiddle demonstration to go with it: http://jsfiddle.net/N7ZAr/3/
If it is a fixed size element, you can do something like this:
#centered {
position:absolute;
width:200px;
height:400px;
top:50%;
left:50%;
margin-left:-100px; // negative-half of element's width
margin-top:-200px; // negative-half of element's height
}
The trick here is top:50%; left:50%;. Combine it with a margin-left and a margin-top equal to negative-half of your width and height, and your element will be centered in your page.
If you do not use a reset stylesheet such as Eric Meyer's CSS reset or normalize.css, it's important you set your body to margin:0; for this trick to work.
Here is a jsfiddle: http://jsfiddle.net/remibreton/fZywe/1/
Live example of a site I did: http://althotels.ca/
http://milov.nl/code/css/verticalcenter.html
check the source code
If you don't know the size of the centered content, you need a two step centering
Example here: http://jsfiddle.net/G6fUE/
<div class="popup-center">
<div class="content">
sadalshd<br />
sadalshd<br />
<img src="http://www.lorempixel.com/200/200" />
sadalshd<br>
</div>
</div>
.popup-center {
position: absolute;
top: 50%;
left: 50%;
}
.popup-center div {
margin-left: -50%;
margin-top: -50%;
}
for left/right centering, you can specify a width for the element and set the left and right margins to "auto".
For vertical centering, it's a bit trickier. You can use percentage heights, but remember to set the height of the body to be 100% or this won't work.
Don't know if this works in IE7, sorry.