vertical-alignment

Consider the following example: ( live demo here ) HTML: <a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a> CSS: a { display: block; background: #000; line-height: 40px; } img { vertical-align: middle; } The output is: Why the image is not vertically centered ? How could I fix that so it will work in all major browsers ? Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown. sandeep You can use position:absolute; for this. For example: a { display: block; background: #000; line-height: 40px;

I'm trying to understand why the line-height CSS property places the text vertically in the middle of this button: .btn-order { width: 220px; height: 58px; font-size: 24px; padding: 0; text-align: center; vertical-align: middle; line-height: 58px; border: 1px solid black; } <div class="btn-order">Complete Order</div> The line-height property is essentially setting a 29px (29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58px below this text. You are putting line-height here only to center your text in the middle.

I have this layout: My CSS : body { background: #e2eaed; } a { text-decoration: none; color: #fff; font-size: 30px; height: 62px; line-height: 62px; /* vertical-align: middle is not works */ background: #8dc73f; width: 132px; padding: 0 25px; font-size: 16px; text-align: center; font-weight: bold; margin-left: 4px; display: block; float: left; } ​When button has 1-line text, my code works well. But when button has 2-line text, like in the image above. The code text has big height, because I use the line-height property. I have tried vertical-align but it is not working. Please, see jsfiddle .

You can reproduce this by running this test case . The results are shown in the screenshot below. The issue is that on Firefox, when adding a overflow: hidden on the "block" (with grey background in the screenshot), the block stop being aligned as I'd like it to be: instead of the baseline of the text in the block being align to the the baseline of the parent box, it is as if the bottom of the block was aligned on the baseline of the parent box. As you can see in the screenshot, this doesn't happen with Chrome. Is this a Firefox bug? How to get the expected result on Firefox (baseline

This question already has answers here : Best way to center a <div> on a page vertically and horizontally? [duplicate] (30 answers) I want to align a div horizontally center and vertically middle of the body of a page. The css: .loginBody { width: 100%; height: 100%; margin: 0; padding: 0; background: #999; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ background: -moz-linear-gradient(top,

I am having trouble vertically aligning background image with text, without assigning constant (and hence, not automatic and reusable) values to height or line-height . I was wondering if there actually is a way to vertically center align bg image of, say and a element , with its text without assigning constant values to line-height or height`? A live demo is available here: http://cssdesk.com/8Jsx2 . Here's the HTML: <a class="">background-position: center</a> <a class="contain">background-size: contain</a> <a class="line-height">Constant line-height</a> And here's the CSS: a { display: block

I have looked at the different questions regarding this issue, but couldn't find anything that works due to limitations in my markup. My markup looks like so (unfortunately as this is generated by some backend, I am unable to change the markup). <ul> <li> <input type="checkbox" value="1" name="test[]" id="myid1"> <label for="myid1">label1</label> </li> <li> <input type="checkbox" value="2" name="test[]" id="myid2"> <label for="myid2">label1</label> </li> </ul> I need the checkbox to be on the right and centered vertically in the <li> Currently, this is styled as: li input{ display: inline