CSS - Centering Tables / Fieldsets
Centering Tables ...
Using CSS to center HTML Tables and Fieldsets can be an absolute nightmare and many 'solutions' found on the Web will break under one circumstance or another. This really simple and elegant solution works with both the W3C '4.01 Strict' and W3C '4.01 Transitional' directives or without any DOCTYPE directive at all. It validates and works in all browsers we have tested including Microsoft, Mozilla, Opera and Netscape. We have not found a browser or browser version (v5 and later) that breaks it and it even leaves the contents of the Table cells left aligned.
first, create the following styles ...
<style type="text/css">
<!--
.centerTable {
text-align:center;
}
.centerTable table {
margin-left:auto;
margin-right:auto;
/* INHERITED ALIGNMENT IS CENTER. ONLY INCLUDE THIS IF YOU WANT */
/* TO CHANGE THE ALIGNMENT OF THE CONTENTS OF THE TABLE */
text-align:left;
}
-->
</style>
then wrap your table in a DIV in the following manner ...
<div class="centerTable"> <table> </table> </div>
Centering Fieldsets ...
Fieldsets and their contents are notorious for rendering both incorrectly and independently, particularly when you are trying to center them on the page. This solution is very similar to the Centering Tables solution but we have not tested it as extensively. However it works perfectly in all the browsers we have tested it in and has cured a lot of problems for us.
first, create the following styles ...
<style type="text/css">
<!--
.centerFieldset {
text-align:center;
}
.centerFieldset fieldset {
display:inline;
margin-left:auto;
margin-right:auto;
/* INHERITED ALIGNMENT IS CENTER. ONLY INCLUDE THIS IF YOU WANT */
/* TO CHANGE THE ALIGNMENT OF THE CONTENTS OF THE FIELDSET */
text-align:left;
}
-->
</style>
then wrap your fieldset in a DIV in the following manner ...
<div class="centerFieldset"> <fieldset> </fieldset> </div>
Link Directly To This Page ...
help support free information on the Internet ...
Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.
the link displayed ...
select/copy the link Markup ...
