Search code examples
cssstylesvertical-alignment

Cancel vertical-align property

Is there a way to cancel or overcome a vertical-align property?

I have a website with a stylesheet containing the following CSS:

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, font, 
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, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, 
figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, 
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
}

I have inserted a table on a page with its content showing up in a weird way because of this style property (meaning that if I uncheck "vertical-align: baseline" within Chrome developer tool, it shows up exactly how I want).

How can I reproduce that on my page?

Thanks!

Solution

  • This is an interesting question because it touches very much on the default style sheet of the browser.

    If you look at the default style sheet given in the spec (http://www.w3.org/TR/CSS21/sample.html), you see the following:

    thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }

    As a result, the default behavior is for the content of a table-cell to be vertically centered in the table cell.

    In your style sheet, you are setting the vertical-align property to baseline for the tbody, tfoot, thead, tr, th and td elements, which is affecting your table layout.

    You need to either adjust the CSS rule that resets the vertical-align property or add additional rules for the table styling as needed.

    In your example, you can simply add the two rules given above after your original rule.

    Alternatively, leave out the vertical-align property from the original rule set.

    To be more specific, alter your CSS style sheet 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, font, 
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, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, 
figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, 
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
}
thead, tbody, tfoot { vertical-align: middle } /* add this rule*/
td, th, tr { vertical-align: inherit } /* add this rule */

    by adding the two additional rules.