在表格单元格中垂直对齐文本跨度

Question

How can I align vertical text, that is generated by two spans, inside a div inside a table cell. I've tried many combinations of text-align,display but nothing worked. I have this html segment

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

and the output is

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

while I want to be rendered like this

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

fiddle: http://jsfiddle.net/hjuxdd1b/1/

Answer 1

You can use following:

.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

Give display: block to .container span

.container span {display: block;}

Remove the height and line-height in the .container

Fiddle: http://jsfiddle.net/praveenscience/hjuxdd1b/7/

Answer 3

You may not need that div:

• Set those spans to display: block so they are each given their own line.

• Give vertical-align: middle to the td so that its content will stay vertically centred.

Have a fiddle

By default a span is display: inline so they will line up next to each other. You could 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

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