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/
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*/
}
Give display: block
to .container span
.container span {display: block;}
Remove the height
and line-height
in the .container
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.
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>
在第一个 span 后添加 br 标签或用 div 替换 span。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.