Question

鉴于这种不幸但需要的结构：

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

给定的CSS：

span {
    vertical-align: middle;
}

div {
    display: inline-block;
}

table {
    border: 1px solid red;
}

为跨度设置样式的正确方法是什么，使其看起来与div＆gt;垂直对齐？表

以下是我不想要的一个简单示例：http://jsfiddle.net/itslittlejohn/3hLsy1yf/2/

Answer 1

只需将<span>和<div>设置为内联块并垂直对齐中间。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这能让你接近你想要的吗？

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

这可能不适用于内容较多或涉及其他因素的情况。如果有更多元素会影响跨度和/或表的位置，那么您也可以发布该代码吗？

Answer 3

试试这种风格

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

Fiddle

将跨度与内联块div垂直对齐＆gt;表

3 个答案: