Vertical align all(!) elements in TD?

I have a simple table with 1 TD with vertical-align:middle;. This TD contains an Image :

table
{
  border:solid 1px red;
  width:300px;
}

td
{
  height:100px;
  vertical-align:middle;
  width:100%;
  border:solid 1px green;
}
img
{
  height:43px;width:43px;
}

span
{
  vertical-align:middle;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8/>
    <title>JS Bin</title>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <img src='http://static.jsbin.com/images/favicon.png'/>
        </td>
      </tr>
    </table>
  </body>
</html>

Everything is Ok and the IMG is vertical-aligned.

But If I add another elements after that Image ( a span for example ) :

table
{
  border:solid 1px red;
  width:300px;
}

td
{
  height:100px;
  vertical-align:middle;
  width:100%;
  border:solid 1px green;
}
img
{
  height:43px;width:43px;
}

span
{
  vertical-align:middle;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8/>
    <title>JS Bin</title>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <img src='http://static.jsbin.com/images/favicon.png'/>
          <span>aaa</span>
        </td>
      </tr>
    </table>
  </body>
</html>

Question

Doesn't the vertical align of the TD should vertical align all its childs ?

How can I make the span to be centered as well ?

I don't want to add another TD , nor using float with padding/margin. IE8+.

edit:

Desired result :

enter image description here

Question
Doesn't the vertical align of the TD should vertical align all its childs ?

NO.
When you apply vertical-align to td, it is only applied to td, and is not inherited by any of its children.

If i have a TD with only span in it - it will vertical align. If I had a TD with only IMG inside it - it will also align.

This is because of the way vertical-align for td works. The total height of the cell i.e td is calculated and the whole cell is aligned vertically.

If there is a single img, then the height of td is same as that of img, so it seems that vertical-align for img is also middle. But actually, the td is vertically aligned to the middle with the img as vertical-align : baseline

Same is the case when there is a single span.

but if i have both - it doesn't. why is that ?

Because now, the height of td is the combined height of both img + span. So, actually, td is vertically aligned in the middle, but not img and span.

How can I make the span to be centered as well ?

You need to apply this CSS :

td > * {
    vertical-align : middle;
}

This will apply the CSS to all the children.

Check the JSFiddle for a better picture.

Hope, this answers your question.

You can just use vertical-align: middle; to your span

img
{
  height:43px;width:43px;
  display: inline;
  vertical-align: middle;
}

span
{
  vertical-align:middle;
  display: inline;
  
}

your jsbin

As per comment

You may think as if td is given vertical-align: middle; then it should align all the contents inside this but having an image and a span in which browser is understanding the image is what? : is this inline or inline-block, so you need to set display: inline or inline-block; Then you may see its working only applying display property for image. demo

Edit

img tag : source: display inline vs inline-block

They are "block" elements in that they have a width and a height.

It's true, they are both - or more precisely, they are "inline block" elements. This means that they flow inline like text, but also have a width and height like block elements.

Also check this:

Replaced Elements

A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images ( tags), plugins ( tags), and form elements (, , , and tags). All other elements types can be referred to as non-replaced elements.

Replaced elements can have intrinsic dimensions—width and height values that are defined by the element itself, rather than by its surroundings in the document. For example, if an image element has a width set to auto, the width of the linked image file will be used. Intrinsic dimensions also define an intrinsic ratio that’s used to determine the computed dimensions of the element should only one dimension be specified. For example, if only the width is specified for an image element—at, say, 100px—and the actual image is 200 pixels wide and 100 pixels high, the height of the element will be scaled by the same amount, to 50px.

Replaced elements can also have visual formatting requirements imposed by the element, outside of the control of CSS; for example, the user interface controls rendered for form elements.

In an inline formatting context, you can also think of a replaced element as being one that acts as a single, big character for the purposes of wrapping and layout. A width and height can be specified for replaced inline elements, in which case the height of the line box in which the element is positioned is made tall enough to accommodate the replaced element, including any specified box properties.

Here's a JS fiddle solution

fiddle

Here's the css

  table
{
  border:solid 1px red;
  width:300px;
}

td
{
  height:100px;
  vertical-align:middle;
  width:100%;
  border:solid 1px green;
}
img
{
  display: inline;
height: 43px;
width: 43px;
  position: relative !important;
float: left;
}

span
{
  height: auto !important;
width: 80%;
float: right;
position: relative;
vertical-align: middle !important;
text-align: left;
}

Vertical align all(!) elements in TD?

edit:

Related

Recent Posts