在表格单元格中垂直对齐文本范围

Question

如何在表格单元格内的div内对齐由两个跨度生成的垂直文本。我已经尝试过很多文本对齐，显示组合，但没有任何效果。我有这个HTML段

<table>
    <tr>
        <td>
            <div class="container">
                <span>This is span-sentence-1</span>
                 <span>This is span-sentence-2</span>
            </div>
        </td>
    </tr>
</table>

，输出

This is span-sentence-1 This is span-sentence-2

虽然我想像这样被重新发送

This is span-sentence-1
This is span-sentence-2

小提琴：http://jsfiddle.net/hjuxdd1b/1/

Answer 1

您可以使用以下内容：

.container {
    width: 100%;
    line-height: 50px;
    border: 1px solid black;
    /*height: 50px; Remove height*/
}

.container span{
    display: block;/*Set display to  block*/
}

fiddle

Answer 2

将display: block提交给.container span

.container span {display: block;}

删除height

中的line-height和.container

小提琴：http://jsfiddle.net/praveenscience/hjuxdd1b/7/

Answer 3

你可能不需要那个div：

• 将这些范围设置为display: block，以便每个范围都有自己的行。

• 将vertical-align: middle提供给td，使其内容保持垂直居中。

Have a fiddle

默认情况下，范围为display: inline，因此它们会相互排列。你可以read more about the span element over on the MDN。

CSS

td {
    vertical-align: middle;
    height: 100px;
    border: 1px solid black;
}
td span {
    display: block;
}

HTML

<table>
    <tr>
        <td> 
            <span>This is span-sentence-1</span>
            <span>This is span-sentence-2</span>
        </td>
    </tr>
</table>

Answer 4

在第一个跨度后添加br标记或用div替换span。