Cancel vertical-align property - css

Question

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!

Answer 1

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.

Answer 2

i am also using a wordpress template with the same "reset" in the stylesheet.
i didn't want to simply reset the reset in my child stylesheet -- untold number of errors that could cause, based on the convoluted css.
instead, in my "child" stylesheet, i added a class and defined that any table element within a item sporting that class would be vertically aligned to the middle:
.masthead-table table, caption, tbody, tfoot, thead, tr, th, td {
vertical-align: middle;
}
then in the page where it actually appears, i gave the div containing the table its proper class:
<div class="masthead-table">
<table>
<tr>
<td>
voila, my middle-v-aligned content
</td>
</tr>
</table>
</div>

Answer 3

You cannot cancel a property. By CSS principles, every element has all properties defined in CSS (though not all properties affect the rendering of an element).
Neither can you tell, in a style sheet, a browser to ignore a CSS rule appearing in another style sheet. You can only throw in your own settings, and they will then participate the cascade and may thereby override other settings.
There is no way to know what CSS settings may be present in browser default style sheets, user style sheets, and other page style sheets. The only way to ensure that things work as if a CSS rule were not present is to actually remove the rule. This is one reason why “CSS reset” rule sets are so risky.
If you have been forced to work in an environment where some “CSS reset” is present and cannot be removed or changed, you may need to study in detail which default settings they may override. There is no guarantee that this is successful, since browsers are free to have whatever they like in the default style sheets. But the settings that probably matter are those that are described and more or less recommended in HTML5, section Rendering. It describes the following:
sub { vertical-align: sub; }
sup { vertical-align: super; }
thead, tbody, tfoot, table > tr { vertical-align: middle; }
tr, td, th { vertical-align: inherit; }
... and some settings that define the valign attribute in terms of CSS, as well as some special rules for the new meter and progress elements.
Thus, vertical-align: baseline may cause several default rendering features to be overridden. You would need to analyze which of them apply and to make sure that you set vertical-align to suitable values for the elements where it matters.

Answer 4

Since vertical-align property cannot be canceled, will your website render appropriately without it? Like by modifying margin, padding, and border?
margin: 1px 1px 1px 1px; (or something similar)....
A very descriptive site for info on those:
http://www.w3.org/TR/CSS21/box.html
And this site for info on baseline and vertical-align:
http://dev.w3.org/csswg/css-text-3/

Answer 5

Please check CSS vertical-align property default
because the default value is baseline anyway.
However, you can remove it from the CSS set,
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, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {