473,231 Members | 1,659 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,231 software developers and data experts.

Centering left-floated items - how? Please help!

SHORT VERSION
=============

I have a bunch of identical fixed-size single-celled tables that rest
against each other horizontally thanks to "float:left". These tables
are dynamically generated and the number of them can vary greatly. They
are all contained within a parent table cell, which is centred on the
page. But I am unable to find a way of centering these table cells
within the parent cell.

I basically need to be able to have fixed-size image containers stacked
horizontally (which is why I use float:left), but to have those centred
(which float:left negates).

I've tried DIVs, and the behaviour is the same. Any ideas? Thanks.
LONG VERSION
============

I am building a couple of pages for a client that need to feature a row
hyperlinked images. The pages are being generated dynamically with a
PHP script pulling data from an XML file. This way my client doesn't
need to edit HTML - editing the XML file and uploading the image will
update the site. The page in question is here:

http://www.impala.org/promoterlist.php

The three logos visible are contained within single-cell tables, with
dimensions of 135x135 pixels each. They are floated left, which is why
they are horizontally next to each other. They are themselves nested
within a table which is centred in that section of the page.

My problem is that the three floating table cells are resting against
the left margin of the parent table cell. I want it to be centred.

The dimensions are all organised so that the parent cell nicely fits
four child tables, and then the fifth wraps to the next line and
carries on. When I have multiples of four logos in there, it looks
perfect. But I want what is there to be centred.

What is the best way of acheiving this?

It is important to bear in mind that the number of logos will change
and that the page is dynamically generated, so any solution will need
to work regardless of the number of logos and the code needs to lend
itself to replication by a script (i.e. using the script to generate a
table with multiple cells will not work because each loop must only
process one image and it needs to apply the same identical code to each
image).

Two fixes I've attempted:

1) Using DIVs instead of tables - exact same problem.

2) Trying to find a way to use CSS to create an "invisible box" around
an image of a set dimension and to anchor the centre point of that
image to the centre of that box. Not found anything. This would remove
the need for any layout code.

I know an easy way would just be to ensure each image is 135x135 pixels
and forget about using tables and DIVs, but that is not a burden I want
to give to my client.

I hope I've made things clear! Any help would be greatly appreciated.

Dec 5 '06 #1
2 2999
ru*******@gmail.com wrote:
SHORT VERSION
=============

I have a bunch of identical fixed-size single-celled tables that rest
against each other horizontally thanks to "float:left". These tables
are dynamically generated and the number of them can vary greatly. They
are all contained within a parent table cell, which is centred on the
page. But I am unable to find a way of centering these table cells
within the parent cell.

I basically need to be able to have fixed-size image containers stacked
horizontally (which is why I use float:left), but to have those centred
(which float:left negates).

I've tried DIVs, and the behaviour is the same. Any ideas? Thanks.
Yes, do use DIVs, not one-celled tables.

To align the inline content *within* a block, use text-align: center.
Dec 5 '06 #2
ru*******@gmail.com wrote:
>
I have a bunch of identical fixed-size single-celled tables that rest
against each other horizontally thanks to "float:left". These tables
are dynamically generated and the number of them can vary greatly. They
are all contained within a parent table cell, which is centred on the
page. But I am unable to find a way of centering these table cells
within the parent cell.

I basically need to have fixed-size image containers stacked
horizontally (which is why I use float:left), but to have those centred
(which float:left negates).

I've tried DIVs, and the behaviour is the same. Any ideas? Thanks.
Drop the use of single-celled tables altogether. (Sounds like a biology
project.) There is no need to float the images or their containers.
Simply list the images in the parent table cell and set the cell's
justification attribute to "center". Place a space between <img>'s so they
will wrap within the cell.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Dec 5 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Jeff Thies | last post by:
I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width:...
18
by: Heath | last post by:
Is it proper to center images in a <div> by using the text-align: center property? Or is there a better way?
3
by: Haines Brown | last post by:
I thought I had understood this issue and implemented a work around, but now when I check on IE5, it is not working: ... #IE-hack { margin-left: auto; margin-right: auto; width: 20em;...
9
by: Pierre Jelenc | last post by:
Is there a way to center (horizontally) a UL list of unknown width? I can put it in a DIV that's centered with "margin-left: auto; margin-right: auto;" but I then have to specify a width; otherwise...
3
by: CMAR | last post by:
To center my <div>, I am currently using something like <div id="navcontainer" align="center"> This centers fine, but is deprecated code. I have seen these two solutions recommended. 1) ...
4
by: yawnmoth | last post by:
margin-left: auto; margin-right: auto; doesn't seem to be centering tables in a webpage I'm working on, in IE. It does so in Opera, but not in IE. Any ideas as to why? Or better yet, what I can...
13
by: Raffi | last post by:
Hi, We have an application that requires IE. We recently incorporated CSS scroll areas. The scroll fields are supposed to be centered. They are except for IE5 for the Mac. I have tried various...
3
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...
2
by: stevieg | last post by:
I know this has been dealt with in previous posts, but i am having a problem with centering the following layout. Can anybody spot where I am going wrong? Thanks! body { text-align:center;...
1
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.