Reputation: 103
Center the text in a row of an HTML table
I am trying to move the text in the last column of the table so that it is aligned with the text in the previous columns. Though, I have no idea how to do this. I've tried putting it in <p> tags, I've tried moving the <IMG> around, nothing seems to work. Any ideas? See "Week 3" for the row that I am working on.
NOTE: The table isn't complete, we won't be playing the Packers every week of the season! :P
CSS:
<table class="luncheon">
<caption><h2 class="luncheon">2015 Whitewater Warrior Schedule</h2></caption>
<thead>
<tr>
<th>Week</th>
<th>Date</th>
<th>Home/Away</th>
<th>Win/Loss</th>
<th>Game Details</th>
</tr>
</thead>
<tbody>
<tr class="border_bottom">
<td rowspan="1">1</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">2</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1"><b>3</b></td>
<td><b>SEPTEMBER 13</b></td>
<td><b>HOME</b></td>
<td><b>WIN</b></td>
<td><img src="images/packers.png" alt="Town Hall logo"><b> PACKERS: 10 WARRIORS: 23</b></td>
</tr>
<tr class="border_bottom">
<td rowspan="1">4</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">5</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">6</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">7</td>
<td>BYE</td>
<td> </td>
<td> </td>
<td class="right"> </td>
</tr>
<tr class="border_bottom">
<td rowspan="1">8</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">9</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">10</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">11</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">12</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">13</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">14</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">15</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">16</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
<tr class="border_bottom">
<td rowspan="1">17</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"> Packers: 10 Warriors: 23</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4" class="center">Post-Season Games are TBD</th>
</tr>
</tfoot>
</table>
Upvotes: 1
Views: 265
Answers (5)
Reputation: 53
Your images/packers.png and text after it aligned by baseline. I think you need to make two blocks with equal height: i.e. encapsulate text in span in apply next css:
.luncheon .right span {
whitespace: no-wrap;
display: inline-block;
height: {height-of-your-packers-image};
}
UPD: Variant 2: Set image to background (middle,center) and padding for text:
.luncheon .right {
background-image: url("{path-to-image}/images/packers.png");
background-position: left middle;
background-repeat: no-repeat;
padding-left: {width-of-your-packers-image};
}
Upvotes: 0
Reputation: 2330
Can you refactor the code so that warriors has it's own TD cell? This will ensure that the team names line up!
<table class="luncheon">
<caption><h2 class="luncheon">2015 Whitewater Warrior Schedule</h2></caption>
<thead>
<tr>
<th>Week</th>
<th>Date</th>
<th>Home/Away</th>
<th>Win/Loss</th>
<th colspan="2">Game Details</th>
</tr>
</thead>
<tbody>
<tr class="border_bottom">
<td rowspan="1">1</td>
<td>SEPTEMBER 13</td>
<td>HOME</td>
<td>WIN</td>
<td class="right"><img src="images/packers.png" alt="Town Hall logo"><span>Packers: 10</span></td>
<td>Warriors: 23</td>
</tr>
// etc etc
CSS
// vertically align regardless of parent height
td{ position: relative; )
td span{ position: absolute; top: 50%; translateY(-50%);
Upvotes: 0
Reputation: 11424
Images by default align with the text along the baseline. Keeping your current code structure, you can use vertical-align: middle for your image as follows:
<td class="right">
<img style="vertical-align: middle" src="images/packers.png" alt="Town Hall logo">
<span style="vertical-align: middle">Packers: 10 Warriors: 23</span>
</td>
Though I'd eventually get rid of the nbsp; and use css with margin or padding instead.
Upvotes: 2
Reputation: 1
If you want whole content to align right, create class for that and use { text-align: right; } for that class;
If you want that to be left align, i ll provide you alternate but its not best solution, create another for that game image.for text part use another with { text-align: right; }
Upvotes: 0
Reputation: 4413
Adding vertical-align:middle to the cell's image should fix the problem.
.luncheon td img {
vertical-align:middle
}
Upvotes: 0
Related Questions
- How to center the contents of an HTML table?
- CSS Styling - Can't centre text in a table
- Center Text in Table column
- Center text in table cell
- Horizontally Centering text inside a table
- How to center the text of a thead in a table
- Aligning text in center of div within table
- How can I center the text in a table?
- Center text in HTML table
- Center a row element in a table