将范围与内嵌块div>表格垂直对齐

Question

Given this unfortunate but required structure:

<span>Label Text</span>
<div>
    <table>
        <tbody>
            <tr>
                <td>Single Row Table Text</td>
            </tr>
        </tbody>
    </table>
</div>

And the given CSS:

span {
    vertical-align: middle;
}

div {
    display: inline-block;
}

table {
    border: 1px solid red;
}

What is the correct way to style the span so that it appears to be vertically aligned with the div > table?

Here is a simple example of what I do not want: http://jsfiddle.net/itslittlejohn/3hLsy1yf/2/

Answer 1

Just set both <span> and <div> as inline block and vertical align middle.

 span, div { display: inline-block; border: 1px solid red; vertical-align: middle; } 

 <span>Label Text</span> <div> <table> <tbody> <tr> <td>Single Row Table Text</td> </tr> </tbody> </table> </div> 

Answer 2

Does this get you close to what you want?

  span{
     vertical-align: top;
     padding-top: 4px;
     display: inline-block;
  }

This may not work in a context where there is more content or there are other factors involved. If there are more elements that would affect the position of the span and/or table could you post that code as well?

Answer 3

Try this style

span {
    /* display: inline-block; */
    float: left;
    line-height: 26px;
    margin-right: 10px;
}

Fiddle