CODEWITHSUNDEEP
htmlcss
JmRag
JmRag

Reputation: 1459

Align span of text vertically in table cell

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/

Upvotes: 2

Views: 1552

Answers (4)

misterManSam
misterManSam

Reputation: 24712

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>

Upvotes: 0

Marian Ban
Marian Ban

Reputation: 8188

Add br tag after the first span or replace span with div.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

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/

Upvotes: 0

Alex Char
Alex Char

Reputation: 33228

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

Upvotes: 2

Related Questions