CODEWITHSUNDEEP
htmlcsscss-floatvertical-alignment
Niklas
Niklas

Reputation: 13135

Top align text and image within div

Here's the rendered html: 

<div style="padding-left: 50px; vertical-align: middle;">
  <strong>NONE</strong>
  <img height="15" width="15" src="images/Checked.gif" alt="">
  <br>
  <span style="font-size: larger;">DEFAULT</span>
</div>

general css:

div {
  font-size:smaller;
  padding:5px 5px 0 0;
  float:left;
}

Here's what the design looks like in firebug:
enter image description here

I would like the text NONE to align at the top, just the way the image (checkbox) is aligned. Any ideas on how to do this with css?

Upvotes: 2

Views: 27097

Answers (4)

Jeff Johnson
Jeff Johnson

Reputation: 1097

These answers didn't work for me, here's how I got it working...

<div style="line-height:0px;">
  <span style="vertical-align:middle;">test</span>
  <img src="myimage.png" style="vertical-align:middle;" />
</div>

give the container element (in my example, the <div>) element a line-height attribute value of 0px; then everything you want on the line should have a vertical-align:middle; style applied.

Tested in Chrome, FF, IE7+...

Upvotes: 0

morewry
morewry

Reputation: 4450

Couple of things:

  • Since you know the height of your image, to get the exact alignment you want, try setting a line-height. You can set it at 15px or 1 (just 1, no unit), and see which you prefer.
  • Change your value for vertical-align. It's meant to control the vertical alignment of two inline (or inline-block) items next to each other. Which is what you have when you have strong next to img, it's just that middle doesn't look the way you want. Other values that work reasonably well cross-browser are baseline, top, bottom and sometimes text-top or text-bottom.
  • Beyond that, you can set both the img and the strong to block and use float, height, and padding.

Examples:

<div style="padding-left: 50px; line-height: 15px;">
  <strong>NONE</strong>
  <img height="15" width="15" src="images/Checked.gif" alt="">
  <br>
  <span style="font-size: larger;">DEFAULT</span>
</div>

<div style="padding-left: 50px; vertical-align: top;">
  <strong>NONE</strong>
  <img height="15" width="15" src="images/Checked.gif" alt="">
  <br>
  <span style="font-size: larger;">DEFAULT</span>
</div>

Others have already down an example with floats.

Upvotes: 1

Joe
Joe

Reputation: 137

The issue is that the line height on the top is going to conform to however high your image is. To compensate, you can put the "none" text in a block element, and then set your alignment in there. Here would be an example:

<div style="padding-left: 50px; vertical-align: middle;">
  <div style="height:15px; width:50px; float:left;">NONE</div>
  <img style="height:15px; width:15px; float:left;" src="images/Checked.gif" alt="" />
  <br style="clear:both;" />
  <span style="font-size:larger;">DEFAULT</span>
</div>

From here you can play with the padding and alignment within that div around the none text.

Upvotes: 0

Blender
Blender

Reputation: 298106

vertical-align: middle doesn't do what you think it does.

<div style="padding-left: 50px;">
  <strong style="float: left;">NONE</strong>
  <img height="15" width="15" src="images/Checked.gif" alt="">
  <br>
  <span style="font-size: larger;">DEFAULT</span>
</div>

Upvotes: 2

Related Questions