CODEWITHSUNDEEP
htmlcss
itslittlejohn
itslittlejohn

Reputation: 1878

Vertically align span with inline-block div > table

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/

Upvotes: 1

Views: 71

Answers (3)

Fares M.
Fares M.

Reputation: 1538

Try this style

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

Fiddle

Upvotes: 0

Stickers
Stickers

Reputation: 78686

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>

Upvotes: 4

dukedevil294
dukedevil294

Reputation: 1305

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?

Upvotes: 0

Related Questions