Aligning Image and Text in CSS Table

Question

I have seen several CSS alignment tips, but none relating to a table.

My code for the table properties are as follows:

    table.pic {
    border-spacing: 1;
    }
    table.pic td {
    padding: 5px;
    border: 4px solid #cccccc;
    }
    table.pic tr:nth-child(odd) {
    background-color: #f2f2f2;
        }

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

This is my code for the first table row:

<table class="pic" style="width: 100%;">
<tbody>
<tr>
<td><img src="/sites/default/files/images/img.jpg" alt="" width="146" height="218" /></td>
<td>
<p>blahblah</p>
<p>poodle</p>
<p>noodle</p>
</td>
</tr>
</tbody>
</table>

No matter what change I try to make, the text still ends up on the cell to the right, but vertically it starts on the bottom line of the image. Anyone know what my issue is?

@Harsh where would I add div? I just tried putting it around the text block (<td><div>....</div></td>) and that didnt work. — Kevin Kesicki
– Kevin Kesicki, Commented Nov 14, 2013 at 19:53
<div><p>...</p>... </div> would wrap the text in a block element; with change to css to vertical align the div wrapper ... <td><div><p>...</p></div></td> — Wayne Smith
– Wayne Smith, Commented Nov 14, 2013 at 20:14

JinSnow · Accepted Answer · 2013-11-14 20:16:14Z

1

On jsfiddle the text is not align with the bottom edge of the picture, it's vertically centered : http://jsfiddle.net/u3AW2/

Maybe you have overwrites somewhere.

The text is also vertically centered with :

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

answered Nov 14, 2013 at 20:16

JinSnow

1,7014 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wayne Smith Over a year ago

I hate it when something changes the rules :(

Wayne Smith · Accepted Answer · 2013-11-14 20:30:59Z

0

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

aligns div elements, which are children of tables with a class of pic. I don't see the div in your html.

I assume you want

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

to align all td elements of the table to vertical center.

Updade:

to attempt to override any theme rules you can get more selective

table.pic {
border-spacing: 1;
}
table.pic td {
padding: 5px;
border: 4px solid #cccccc;
}
table.pic tr:nth-child(odd) {
background-color: #f2f2f2;
    }

/* use more selectivity */
html body table.pic tr td {
    display:table-cell !important; 
    vertical-align:middle !important;
}

edited Nov 14, 2013 at 20:30

answered Nov 14, 2013 at 19:54

Wayne Smith

4,8781 gold badge28 silver badges27 bronze badges

4 Comments

Kevin Kesicki Over a year ago

thanks, but it still gives me the same results, text is aligned with the bottom edge of the picture

Wayne Smith Over a year ago

What browser? do you have an <!doctype html> in the html to put it in standards mode? With chrome it is centered.

Kevin Kesicki Over a year ago

im on chrome as well, but im using this through drupal 7

Wayne Smith Over a year ago

right click the element and select inspect element, look for any additional css rules that may be effecting the rules you are adding.

BhavinPatel · Accepted Answer · 2015-04-28 00:09:19Z

I had exactly the same issue and found it was because I was using a CSS Reset. For some reason this was conflicting with my style sheet. I was specifically using the one on Meyerweb. Are you using this reset? If so, try changing the first rule as follows:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption, tfoot, thead,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Collectives™ on Stack Overflow

Aligning Image and Text in CSS Table

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related