By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,497 Members | 1,258 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,497 IT Pros & Developers. It's quick & easy.

centering float left

P: n/a
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: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>

</div>

None of these work:

..center{margin: auto}
..center{text-align: center}

How do I center the class center div?

I'm not a big fan of centering stuff but I'm just a programmer, not a
designer.

Jeff
Jul 20 '05 #1
Share this Question
Share on Google+
11 Replies


P: n/a
Els
Jeff Thies wrote:
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: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>

</div>

None of these work:

.center{margin: auto}
.center{text-align: center}

How do I center the class center div?


You need to specify a width on that center div :-)
IIRC (anyone, please correct me if I'm wrong) the
text-align: center is needed for IE5, while the margin:auto
is there for the newer browsers.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #2

P: n/a
On Sat, 13 Sep 2003 13:13:28 +0200, Els
<el*********@PLEASEtiscali.nl.invalid> wrote:
Jeff Thies wrote:
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: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>

</div>

None of these work:

.center{margin: auto}
.center{text-align: center}

How do I center the class center div?


You need to specify a width on that center div :-)
IIRC (anyone, please correct me if I'm wrong) the
text-align: center is needed for IE5, while the margin:auto
is there for the newer browsers.


IMO the easist thing is to do with the outer <div> is to center it by
explicitly setting the widths of the left and right margins, eg:

..center
{
margin-left: 10%;
margin-right: 10%;
}

and that should work even with IE5 as well (heck, it even works in NS4
if you don't try to get too fancy).

Nick

--
Nick Theodorakis
ni******************@urmc.rochester.edu
Jul 20 '05 #3

P: n/a
Els wrote:

IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.


text-align: center when applied to a block will center all elements
contained in the block e.g. to center an img wrap it in a div and apply
text-align: center to the div.

http://www.w3.org/TR/CSS1#text-align

margin: auto is used to center block level elements themselves.

http://www.w3.org/TR/CSS1#horizontal-formatting

--Nikolaos

Jul 20 '05 #4

P: n/a
On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:
Els wrote:

IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.

You're relying on a bug in MSIE to compensate for another bug, but
yes, that's pretty much it, except that normally you'd want to negate
the text-centering effect inside of whatever block element it is that
you're centering, otherwise all your content would get centered.

For more detailed discussion I'd suggest
http://www.allmyfaqs.com/cgi-bin/wik...enter_with_CSS

Google also found this treatise on the topic:
http://theodorakis.net/blockcenter.html

[...] margin: auto is used to center block level elements themselves.

http://www.w3.org/TR/CSS1#horizontal-formatting


In theory, yes, but that only works on conforming WWW browsers.

Jul 20 '05 #5

P: n/a
Alan J. Flavell wrote:
On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:
Els wrote:
IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.


You're relying on a bug in MSIE to compensate for another bug, but
yes, that's pretty much it, except that normally you'd want to negate


You mean Els is....

In re-reading Els reply I realize that he made the above statement in
the context of the *DIV* tag and more specifically as a an IE5 work
around *only*.

That [his remark was solely for DIV's] isn't totally clear from his
statement and that is why I replied - as there is a distinction based on
what the author is trying to center.

--Nikolaos

Jul 20 '05 #6

P: n/a
Els
Alan J. Flavell wrote:
On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:

Els wrote:
IIRC (anyone, please correct me if I'm wrong) the text-align: center is
needed for IE5, while the margin:auto is there for the newer browsers.
You're relying on a bug in MSIE to compensate for another bug, but
yes, that's pretty much it, except that normally you'd want to negate
the text-centering effect inside of whatever block element it is that
you're centering, otherwise all your content would get centered.
I knew it was a bug, but didn't realise the workaround was
relying on yet another bug :-(
The text-centering effect inside does bug me sometimes, but
I manage to make a construction of divs to help
left-aligning parts of the content.
For more detailed discussion I'd suggest
http://www.allmyfaqs.com/cgi-bin/wik...enter_with_CSS

Google also found this treatise on the topic:
http://theodorakis.net/blockcenter.html


Thanks, I bookmarked those pages. I do manage to get my
pages the way I want in most browsers, including IE5.5 and
IE for Mac, but I should study this stuff some more to not
spend so much time working it out every time again :-)
margin: auto is used to center block level elements themselves.

http://www.w3.org/TR/CSS1#horizontal-formatting


In theory, yes, but that only works on conforming WWW browsers.


--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #7

P: n/a
Els
Nikolaos Giannopoulos wrote:
In re-reading Els reply I realize that he made .....

That [his remark ..... his statement .....


I'm not a 'he'.... ;-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #8

P: n/a
Nikolaos Giannopoulos wrote:

text-align: center when applied to a block will center all elements
contained in the block e.g. to center an img wrap it in a div and
apply text-align: center to the div.


Just so that the op is clear:

text-align: center when applied to a block level element will center
all elements contained in it *in MSIE/Win only*[1]. In conforming
browsers, text-align: center will center only inline content in a block.

div {text-align: center; border: thin solid black }
p {border: thin solid green }
p.narrow {width: 12em; border: thin solid blue }

<div>

this text is centered within the div

<p>
this text is centered within the p by inheritance, but
the p element itself is not centered in e.g. Mozilla
</p>

<p class="narrow">
this text is centered within the p by inheritance, but
the p element itself is not centered in e.g. Mozilla
</p>

</div>

[1]I don't have MSIE 6, and am not sure about its behavior. I think
in standards mode, it behaves like Mozilla and Opera on this matter,
but in quirks mode it emulates the bugs of MSIE 5.x/Win. Also, there
are other older browsers that may also suffer from this bug.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #9

P: n/a
On Sat, Sep 13, Els inscribed on the eternal scroll:
I knew it was a bug, but didn't realise the workaround was
relying on yet another bug :-(


It's OK, I would do the same myself ;-)

I sure wouldn't rely on a bug to get some effect I wanted, but I'm
quite happy to exploit a bug which compensates for some other bug, as
long as it does no harm for conforming browsers (..and other user
agents, I should say).

Jul 20 '05 #10

P: n/a
Els wrote:

I'm not a 'he'.... ;-)


Sorry ;-)

--Nikolaos
Jul 20 '05 #11

P: n/a
Els
Nikolaos Giannopoulos wrote:
Els wrote:
I'm not a 'he'.... ;-)


Sorry ;-)


I won't hold it against you ;-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.