Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • jayemmee Friend
    #148364

    I may be a little naive but since I installed the Kyanite template, I am no longer able to align any tables in my content to the center, they are always aligned to the left. I have to manually edit the HTML to put the table into a <div align=”center”> …</div> or use <center> …</center>

    This is an example of a page where I have had to use the <div> solution to center the table
    http://btbanews.org.uk/index.php?option=com_content&view=article&id=130:2010-yac-squad&catid=1:latest-news&Itemid=50

    This is the same page, also with a <table align= “center>, but without the <div align=”center”> and the table now appears to the left.
    http://btbanews.org.uk/index.php?option=com_content&view=article&id=132:2010-yac-squad&catid=31:general&Itemid=46

    Any ideas – am I missing something obvious?

    jayemmee Friend
    #331457

    Looks like I found the answer ..

    The “align” attribute has been deprecated, however, in favor of CSS (Cascading Style Sheets), and this is a good thing. However, it’s not so obvious how to center a table using CSS.

    The obvious way might appear to use the CSS “text-align: center;” somewhere, maybe like one of these:
    <table style=”text-align:center;”>
    OR
    <div style=”text-align:center;”>
    <table>

    </table>
    </div>
    OR, if you get really desperate,
    <body style=”text-align:center;”>
    <table>

    </table>
    </body>

    None of these will work. The table itself will be left-aligned, but all the content in the table cells will be centered.

    Why? Because “text-align” applies to inline content, not to a block-level element like “table”.

    Method 1
    To center a table, you need to set the margins using a CSS class like this:
    table.center {margin-left:auto; margin-right:auto;}
    And then do this:
    <table class=”center”>

    </table>

    At this point, Mozilla and Opera will center your table. Internet Explorer 5.5 and up, however, needs you to add this to your CSS as well:
    body {text-align:center;}

    The above is an extract from the following article http://www.granneman.com/webdev/coding/css/centertables/

    I updated the template.css to add the table class – and this now works – see further example of table using class=”center”
    http://btbanews.org.uk/index.php?option=com_content&view=article&id=136:2010-yac-squad&catid=31:general&Itemid=46

Viewing 2 posts - 1 through 2 (of 2 total)

This topic contains 2 replies, has 1 voice, and was last updated by  jayemmee 14 years, 9 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum