CODEWITHSUNDEEP
htmlcss
nickela125
nickela125

Reputation: 147

Vertically aligning the content of two divs within a table

I've got two divs in each td of a table and I'm wanting to vertically centre the text in both of the divs. The two divs don't seem to be able to align independently - i.e. when the second div spans more than one line, the tops of both divs line up. I want the number and the content to be in the middle of the td

HTML:

<table class="mytable">
<tr>
    <td>
        <div class="number">01</div>
        <div class="content"><span>Some extra extra extra long content</span></div>
    </td>
    <td>
        <div class="number"><span>02</span></div>
        <div class="content"><span>Content</span></div>
    </td>
    <td>
        <div class="number"><span>03</span></div>
        <div class="content"><span>Content</span></div>
    </td>
</tr>

CSS:

table.mytable td {
    background-color: #276;
    color: #000;
    padding: 0.5em;
    width: 10%;
    font-size: 1.5em;
    vertical-align: middle;
    height: 50px;
}
.content {
    margin-left: 40px;
    vertical-align: middle;
}
.number {
    float: left;
    vertical-align: middle;
}

jsFiddle Example

Upvotes: 0

Views: 1559

Answers (5)

Kisspa
Kisspa

Reputation: 584

See myfiddle

.number {
  float: left;
  vertical-align: middle;
 }
td:first-child .number{
line-height:50px;
}

http://jsfiddle.net/kisspa/LMGwH/1/

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

Demo

css

table.mytable td {
    background-color: #276;
    color: #000;
    padding: 0.5em;
    width: 10%;
    font-size: 1.5em;
    vertical-align: middle;
    height: 50px;
}
.content span {
    margin-left: 40px; /* if you wish to keep the margin to the content as in code */
    display: block;
}

table div {
    display: table-cell;
    vertical-align: middle; /* this will make the divs behave as table cell and vertical allign will make it in vertical center */
}

Upvotes: 1

Kheema Pandey
Kheema Pandey

Reputation: 10265

Firs remove the float: left; property from your class number and then use display: table-cell; property on div. Check the DEMO.

table.mytable td {
  background-color: #276;
  color: #000;
  padding: 0.5em;
  width: 10%;
  font-size: 1.5em;
  vertical-align: middle;
}

.mytable div.number, .mytable div.content
{
 display: table-cell; 
 text-align:center; 
 vertical-align:middle;
}

.content {
  margin-left: 40px;
  vertical-align: middle;
}


/*.number {
  float: left;
  vertical-align: middle;
}*/

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

You could set the divs to display: table-cell: http://codepen.io/pageaffairs/pen/BGKEz

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

table.mytable td {
    background-color: #276;
    color: #000;
    padding: 0.5em;
    width: 10%;
    font-size: 1.5em;
    vertical-align: middle;
    height: 50px;
}

td div {display: table-cell; vertical-align: middle;}

.number {width: 40px;}

</style>
</head>
<body>

<table class="mytable">
<tr>
    <td>
        <div class="number">01</div>
        <div class="content"><span>Some extra extra extra long content</span></div>
    </td>
    <td>
        <div class="number"><span>02</span></div>
        <div class="content"><span>Content</span></div>
    </td>
    <td>
        <div class="number"><span>03</span></div>
        <div class="content"><span>Content</span></div>
    </td>
</tr>
</table>

</body>
</html>

Upvotes: 3

Frank ZHENG
Frank ZHENG

Reputation: 109

Why not use different "td" instead of putting two "div" into one cell?

 <td>
    <div class="number"><span>03</span></div>
 </td>
 <td>
    <div class="content"><span>Content</span></div>
</td>

Upvotes: -1

Related Questions