• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 885
  • Last Modified:

CSS: How to Center a Table Within A Div

How do I center the table (which contains the Img) inside its parent div using CSS (see attached screengrabs)?

The html code (included in the snippet) which produces the table is generated by the php call 'jdoc' as follows:

<div id="container">
  <div id="mainContent" class="centered">
  <jdoc:include type="component" />

I need to center the table this jdoc statement creates via my template.css stylesheet not by changing the code called up by jdoc.

I'll add a couple of screen grabs in the next post which show the CSS which applies to the div and table in question (for whatever reason IE isn't responding to the 'ADD FILE' at the moment).

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="_LANGUAGE" xml:lang="_LANGUAGE">
<link rel="stylesheet" href="/qf/css/global_reset_tripoli.css" type="text/css" />
<link rel="stylesheet" href="/qf/css/global_generic_reformat_tripoli.css" type="text/css" />
<link rel="stylesheet" href="/qf/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/qf/templates/
	mq_1col_fxc/css/template.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body class="oneColFixCtr">
<div id="container">
  <div id="mainContent" class="centered">
<table class="contentpaneopen">
<td valign="top">
<img src="/qf/images/stories/img_ctr_test_734x500.jpg" border="0" align="left" />
<span class="article_separator">&nbsp;</span>

Open in new window

  • 2
1 Solution
If you are using a css style, you should be able to include
align: center

you could also use <div align='center'>content_here</div>
qengAuthor Commented:
Screengrabs showing CSS which applies to parent div and table.
Note that the CSS which currently targets the actual table div is only my global reset CSS.  I get exactly the same result (table not centered) if I remove my global reset CSS.

qengAuthor Commented:
bigg oil,
Thx ... for whatever reason i had tried everything else unsuccessfully.
Your suggestion worked perfectly.
(apologies for extra post your reply came in as I was preparing the screen grabs, I didn't need to post the screenshots)

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now