CODEWITHSUNDEEP
htmlcssimagehtml-tablevertical-alignment
Kevin Kesicki
Kevin Kesicki

Reputation: 165

Aligning Image and Text in CSS Table

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?

Upvotes: 1

Views: 10634

Answers (3)

BhavinPatel
BhavinPatel

Reputation: 1

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;
}

Upvotes: 0

Wayne Smith
Wayne Smith

Reputation: 4868

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;
}

Upvotes: 0

JinSnow
JinSnow

Reputation: 1663

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;
    }

Upvotes: 1

Related Questions