Okay, so this question has been asked and answered many times, yet I still can't produce a working solution.
I'd like to vertically align to the middle arbitrary elements in a DIV. So, the linked-to tutorial in the above question says:
Specify the parent container as position:relative or position:absolute.
Specify a fixed height on the child container.
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
Set margin-top:-yy where yy is half the height of the child container to offset the item up.
An example of this in code:
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Except contrary to what the screenshot on the tutorial shows, this doesn't work. The only thing I changed was to add a border around the outer DIV, so you can see the vertical alignment.
All this does is produce a zero-height DIV which renders like a straight line. If you add a height to the outer DIV, you can see the inner content, but it doesn't actually vertically align the content. So, why doesn't this example work?
I believe your containing div also has to have a specified height. If you inspect the #myoutercontainer div with firebug you see that it actually has a height of 13em, which they don't show in the example code given.
Here's a different approach based of this Chris Coyer article. If you want to vertically center the text to a fixed size div, then you can just repeat the process like so. If you want it to align to the right, just turn modify the "text-align: center;" style for myoutercontainer.
Related
I want to center text, both vertically and horizontally, on the pixel that would normally be the top-left of an absolutely positioned div. Here is the html:
<div style="position:absolute; background-color:#EEEEEE; left:100px; top:100px;">
<div style="position:relative; top:-50%; left:-50%;">
My Centered Text
</div>
</div>
JSFiddle: http://jsfiddle.net/fHJkE/1/
As you cans see the html centers the text horizontally, but not vertically. The 'top:-50%' styling doesn't seem to have any affect.
Why is the percentage based top being ignored while left isn't? What can I do to have it center vertically?
EDIT:
Since my question is being misinterpreted, this is what I want:
Top is not being ignored. Top property, when percentage, is relative to the height of a parent object. Since your parent doesn't have a height, top won't work. Unless, of course you set the top in pixels.
try this DEMO
i removed ur div and replaced it with <p> line-height:(parent element's height)px;
will center your text at the middle;(vertically)
If you really want to do it this way, the only way to get the computed height without setting it, is through Javascript. Try it, it will do the trick:
var dv = document.getElementById("dv-align");
dv.style.top = "-" + (dv.offsetHeight/2) + "px";
http://jsfiddle.net/fHJkE/5/
I have a number of divs with the same class, that I want to align vertically inside their container div.
The html part looks like this example:
<div id="container">
<div class="element">
........
</div>
<div class="element">
........
</div>
<div class="element">
........
</div>
</div>
I have floated the elements (divs with .element class) 'left' so they are all on one row. So far so good no problem yet.
The contents of the .element div vary. Now by default, they are aligned top, and I want to align them to the bottom using this css:
#container {position:relative;}
#container .element {position:absolute;bottom:0;}
Works and does align them to the bottom, but unfortunately it also sticks them together and they all look like they are in one place as one div, the one on top of the other.
Trying to set width, margin, padding etc.. to the .element div does nothing, they just act as one div.
What do I need to do to separate them ? I believe giving each div a separate class is not the right solution.
I also would not like to use table solutions, unless there is absolutely no other way.
I have tried vertical-align:bottom which for some reason does nothing.
I kept searching for long about this but nothing related comes up on the net, so if it's a duplicate I apologize.
Thanks in advance.
Well this is what the position:absolute is all about. I don't see why you use it.
If I understand right you want to vertical align the divs to the bottom and have them appear next to each other / beside each other ? Then most likely you have to modify the display css attribute of your divs to display:inline-block; or even use span tags instead.
You could wrap the #container div with another div, set its position to relative, and set the position of #container to absolute and it's bottom to bottom: 0
See my example
have a look at my code.
http://jsfiddle.net/Q8V4H/6/
The text within p element Telephone Dialer is being aligned using top-down approach whereas i want to align it in the center from all positions i,e top right bottom and left. here is the example output my code is producing.
I don't want any space there instead the text Download PC Dialer should be aligned in center of the div i.e from left,right,top,bottom and not just left and right.
here is the example image of what i want to achieve.
if i use text-align:center it will only align the text in center from left and right, not from top and bottom, and in this case i want to align it from top and bottom too. how do i do it?
thank you
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell;text-align:center;vertical-align:middle;padding:8px">
Download PC Dialer
</div>
</div>
<div style="display:table-row">
<div style="display:table-cell;text-align:center">
<img src="download.png">
</div>
</div>
</div>
This will give you the same behaviour as if you had used a table without the semantic issues of actually using a table. Works in all browsers except IE7 and below.
For horziontal alignment, you can use margin: 0 auto; on a fixed div element. For vertical alignment, you can set the line-height to be same as font-size.
Put it in a <div> and then put that in another <div>. The child div should have vertical-align: middle and line-height: Xpx where X is the height of the inner div.
Look here: http://phrogz.net/css/vertical-align/index.html
I have a few floating div elements that are floating left. They all have a height of 100%. One of the divs exceeds the height of the view port and the other DIVs do not resize to 100% of the parent DIV which has a position of relative set (which is how it should work in my oppinion).
Except the display table, table-row, table-cell solution, is there any other way of making all divs 100% of the viewport and if one needs to be higher, make the others stretch to 100% of the parent div that got stretched by the increased div.
How? :)
Thank you.
Correct me if I'm wrong but it seems that you want equal height floated columns. The explanation to this can be quite involved so I'll point you to a few examples.
Try
http://thelucid.com/2010/12/03/the-solution-to-fluid-inconsistencies-and-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I don't follow your question completely. Have a look at this code:
<html>
<body>
<div style="height:50px;position:relative">
<div style="background-color:red; float:right; height:100%">moo</div>
<div style="background-color:green; float:right; height:100%">boo<br/>coo<br/>doo<br/>goo<br/>boo<br/>coo<br/>doo<br/>goo</div>
<div style="background-color:blue; float:right; height:100%">foo</div>
</div>
</body>
</html>
As you can see, the center DIV is has height of more than 50px, so the the outer DIV (with the relative position") is stretched, along with the other inner-DIVs.
Doesn't this work for you?
I would like to vertically align some text and an image in a CSS box.
I tried several methods, here is the code for the last one I tried called "display:table-cell-method"
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img src="images/stopwatch-button-play.png">
</div>
Here is a screenshot of the result in the newest version of Firefox: http://screencast.com/t/Yzg2MzAzNW
The image is centered correctly, the text is only centered nearly correctly. It sits at the baseline of the image. Why?
vertical alignment is thoroughly misunderstood. Have you read this?
as for why the text sites at the baseline of the image, it is because the image and the text are both in the flow of the div. they will not overlap. to have the text centered too (implying it lies over the image), you will have to put the text into a div or a span and adjust its positioning (set it to relative and experiment with left and top).
Cheers
change the following
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img style="vertical-align:middle" src="images/stopwatch-button-play.png">
</div>
You can use the background-position property.
it looks like this.
background: url(path/to/image.whatever) top; //aligns it to the top.
you can even do something like top left or top right etc.
w3schools has everything you need to know about backgrounds.
If your text is only one line high, you can set line-height to the height of your image. It will center the text vertically. Then position:absolute on your image will prevent it from disturbing the positioning of the text in the div:
<div style="border-color:blue; height:200px; ">
<div style="line-height:30px;margin-top:85px">2:38<img style="position:absolute" src="images/stopwatch-button-play.png"></div>
</div>