-
AuthorPosts
-
February 3, 2010 at 4:19 pm #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=50This 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=46Any ideas – am I missing something obvious?
February 4, 2010 at 1:02 am #331457Looks 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 -
AuthorPosts
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