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>
Related
Here is the DEMO which I have tried so far.
What I need is to push the text to the exact top of the div so that it matches the image top alignment.
I want Both image and the text to be align exactly like in one line, now you can see the little space on the top of the text which is not perfectly aligned to the top.
HTML
<div class="wrap">
<div class="image"><img src="" /></div>
<div class="content">Lorem ipsum</div>
</div>
CSS
.wrap{background:grey}
.image{display:table-cell; vertical-align:top}
.content{display:table-cell; vertical-align:top; font-size:24px}
http://jsfiddle.net/s38Uv/20/
You don't need display:table-cell to vertically align to top - that is default behaviour.
The reason you have a gap is that the line-height isn't exactly the same as the virtual box around the text. The difference depends on the font itself. If you are working for explorer 7 and above, you can set the text to display:inline-block, then margin-top: -0.Xem where X is an arbitrary number. You can set margin-top with pixels too, of course.
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.
I have an image that is floated to the left and then some text to the right of the image. However the text is just long enough that one line of a paragraph goes below the image. How to I keep this text inline with the paragraph and keep it from wrapping around the picture?
If you don't want to worry about knowing and setting any widths, you can do this by establishing a new block formatting context for the text container.
i.e. For the markup:
<img src="image.jpg">
<p>Some text
all you need do is give the <p> element an overflow other than "visible". For example:
p { overflow:auto; }
Use a little bit of margin-right on the <img> to separate the text from the image.
If your image is floated to the left, the trick is to have a margin-left of at least the width of the image for whatever element your text is contained in.
For example, if your HTML is something like:
<img src="image.jpg">
<p>Some text
And the width of your image is 160px, you have to give your paragraph a margin-left of at least 160px (it does look nicer if you give it margin-left that's slightly bigger than 160px).
That's all you need to do after you have floated the image, just set the margin-left on the paragraph following it. You don't even need to specify a width for the paragraph.
Demo http://dabblet.com/gist/2791183
You need to the float the image element and the text element separately. I think you also need to specify width for both elements.
<img src"url()" style="float:left; width:100px;">
<div id="text" style="float:left; width:500px;">Words</div>
If you do not place your text in another block element, then it will always wrap around that other floated element. The way floats work is it takes an element out of the "document flow", here's some more specific information on how floats work. The only way to get your text to not wrap is to also place it inside of a block element (like a div tag) and float that element with the floated image to the left.
Example:
<div style="overflow: auto;">
<img src="hello.jpg" style="float: left; width: 200px;">
<div style="float: left; width: 700px;">
Hello!!!
</div>
</div>
The first overflow: auto will declare a height for the container. It's the same concept as adding clear: both in a div tag underneath the image and text div. Remember to always clear your floats! :)
My designer came up with the following design thing:
However I'm not entirely sure how to get the text to stick at the bottom like you can see in the middle. I thought I could do something like (inline css is for example only):
<div style="vertical-align: bottom; height:30px;">
<h2 style="line-height: 15px;font-size: 15px;padding: 0; margin:0;">
Foo bar foo
</h2>
</div>
Suggestions?
Assuming you use two divs for each 'button', if you set the outer divs (the black bits) to be position: absolute or position: relative you can use bottom:0 on the inner div containing the text.
This'll have the effect of aligning the text div at the bottom of it's parent.
Note: You can't use the vertical-align property, as that only does what you expect if you're looking at a table-cell.
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