CSS:  How to Center a Table Within A Div

Posted on 2009-04-24
Last Modified: 2012-05-06
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" "">

<html xmlns="" 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

Question by:qeng
    LVL 4

    Accepted 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>

    Author Comment

    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.


    Author Closing Comment

    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

    Live: Real-Time Solutions, Start Here

    Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

    Join & Write a Comment

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now