Hi,
I've posted this question a few months ago but didn't get a truly satisfying
answer then. So I'd like to post my question again:
How can I center a DIV? The content in the DIV should be left-aligned, but
the DIV itself should be centered, like:
----------------------------------
| |
| =================== |
| | Foo | |
| | Another foo | |
| | Still a foo-bar | |
| =================== |
| |
| |
----------------------------------
There should be no fixed widths. The width of the DIV should be the width of
the content.
TIA,
Axel Dahmen
32  14626 
"Axel Dahmen" <NO*****@NoOneKnows.invalid> wrote: I've posted this question a few months ago but didn't get a truly satisfying
answer then.
You most certainly did, no less than 33 replies.
So I'd like to post my question again:
What do we look like, a jukebox? Here are (the same) answers again, they
are still valid: http://groups-beta.google.com/group/...e959b6bf7a4f41
--
Spartanicus
Spartanicus wrote: "Axel Dahmen" <NO*****@NoOneKnows.invalid> wrote:
I've posted this question a few months ago but didn't get a truly satisfying
answer then.
You most certainly did, no less than 33 replies.
So I'd like to post my question again:
What do we look like, a jukebox? Here are (the same) answers again, they
are still valid:
http://groups-beta.google.com/group/...e959b6bf7a4f41
forgive me for bypassing a very entertaining thread and risking to give
a solution that may have been proposed already.
what works in IE: (doesnt work in gecko based browsers !)
<center>
<div style="width: 0%; text-align: left; border: 2px solid black;">
blabla<br>
blablabla<br>
blabla<br>
</div>
</center>
ps .. i can hardly imagine it would take someone more than a few months
to come with something simple as this, so i already fear that it wont be
completely to your satisfaction.
gl
martin
Barbara de Zoete wrote: On Wed, 26 Jan 2005 19:28:33 +0100, Ali Babba <Al******@40Bandits.com>
wrote:
forgive me for bypassing a very entertaining thread and risking to
give a solution that may have been proposed already.
what works in IE: (doesnt work in gecko based browsers !)
In that case, you didn't provide any solution at all.
in case you mean, 'for gecko based browsers', you are right. since i
have not proposed a solution for gecko based browser your remark is also
completely superfluous.
in case you mean, 'in general', you are completely wrong, as most people
use IE.
in any case, your remark doesnt contribute to answering the OP question.
On Wed, 26 Jan 2005 19:47:40 +0100, Ali Babba <Al******@40Bandits.com> wrote: Barbara de Zoete wrote:
On Wed, 26 Jan 2005 19:28:33 +0100, Ali Babba <Al******@40Bandits.com> wrote:
forgive me for bypassing a very entertaining thread and risking to give a
solution that may have been proposed already.
what works in IE: (doesnt work in gecko based browsers !)
In that case, you didn't provide any solution at all.
in case you mean, 'for gecko based browsers', you are right. since i have not
proposed a solution for gecko based browser your remark is also completely
superfluous.
in case you mean, 'in general', you are completely wrong, as most people use
IE.
in any case, your remark doesnt contribute to answering the OP question.
To start with you last remark: Usenet is not a helpdesk. It's not here to answer
OP's questions. I'm not here to answer OP's questions or any questions.
As soon as someone posts a question in this newsgroup, others will start to
discuss. Maybe just the post, maybe just the question, maybe they divert from
the subject entirely from start on. If any answer comes along, OP is a lucky
man. It's pure chance.
Than the 'as most people use IE' bit: How would you like a RADAR that covers
'about 80%'? If one provides a solution, it should be for the world wide web.
That includes a lot more than damned fucking IE, the basterd crappy peace of
shit. Doesn't mean a solution shouldn't try to work in IE _as well_.
So, stands: a solution that excludes (knowingly) gacko based browsers
_is_not_a_solution_for_the_world_wide_web.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Barbara de Zoete wrote: On Wed, 26 Jan 2005 19:47:40 +0100, Ali Babba <Al******@40Bandits.com>
wrote:
Barbara de Zoete wrote:
On Wed, 26 Jan 2005 19:28:33 +0100, Ali Babba
<Al******@40Bandits.com> wrote:
forgive me for bypassing a very entertaining thread and risking to
give a solution that may have been proposed already.
what works in IE: (doesnt work in gecko based browsers !)
In that case, you didn't provide any solution at all.
in case you mean, 'for gecko based browsers', you are right. since i
have not proposed a solution for gecko based browser your remark is
also completely superfluous.
in case you mean, 'in general', you are completely wrong, as most
people use IE.
in any case, your remark doesnt contribute to answering the OP question.
To start with you last remark: Usenet is not a helpdesk. It's not here
to answer OP's questions. I'm not here to answer OP's questions or any
questions.
As soon as someone posts a question in this newsgroup, others will start
to discuss. Maybe just the post, maybe just the question, maybe they
divert from the subject entirely from start on. If any answer comes
along, OP is a lucky man. It's pure chance.
Than the 'as most people use IE' bit: How would you like a RADAR that
covers 'about 80%'? If one provides a solution, it should be for the
world wide web. That includes a lot more than damned fucking IE, the
basterd crappy peace of shit. Doesn't mean a solution shouldn't try to
work in IE _as well_.
So, stands: a solution that excludes (knowingly) gacko based browsers
_is_not_a_solution_for_the_world_wide_web.
well then, why dont you give it a shot
or do you prefer to divert (avoid) the OP's question
i guess that when you are strolling along this news group you must have
an interest in css and may be able to supply
a_solution_for_the_world_wide_web ?! if not, i really wonder what you
are doing here.
"Ali Babba" <Al******@40Bandits.com> schreef in bericht
news:ct**********@news.hispeed.ch... Barbara de Zoete wrote:
On Wed, 26 Jan 2005 19:47:40 +0100, Ali Babba <Al******@40Bandits.com>
wrote:
Barbara de Zoete wrote:
On Wed, 26 Jan 2005 19:28:33 +0100, Ali Babba <Al******@40Bandits.com>
wrote:
> forgive me for bypassing a very entertaining thread and risking to
> give a solution that may have been proposed already.
>
> what works in IE: (doesnt work in gecko based browsers !)
In that case, you didn't provide any solution at all.
in case you mean, 'for gecko based browsers', you are right. since i
have not proposed a solution for gecko based browser your remark is
also completely superfluous.
in case you mean, 'in general', you are completely wrong, as most people
use IE.
in any case, your remark doesnt contribute to answering the OP question.
To start with you last remark: Usenet is not a helpdesk. It's not here to
answer OP's questions. I'm not here to answer OP's questions or any
questions.
As soon as someone posts a question in this newsgroup, others will start
to discuss. Maybe just the post, maybe just the question, maybe they
divert from the subject entirely from start on. If any answer comes
along, OP is a lucky man. It's pure chance.
Than the 'as most people use IE' bit: How would you like a RADAR that
covers 'about 80%'? If one provides a solution, it should be for the
world wide web. That includes a lot more than damned fucking IE, the
basterd crappy peace of shit. Doesn't mean a solution shouldn't try to
work in IE _as well_.
So, stands: a solution that excludes (knowingly) gacko based browsers
_is_not_a_solution_for_the_world_wide_web.
well then, why dont you give it a shot
or do you prefer to divert (avoid) the OP's question
i guess that when you are strolling along this news group you must have an
interest in css and may be able to supply
a_solution_for_the_world_wide_web ?! if not, i really wonder what you are
doing here.
Oh man, you're waaaaaay out of line.
On Wed, 26 Jan 2005 20:05:54 +0100, Ali Babba <Al******@40Bandits.com> wrote: well then, why dont you give it a shot
or do you prefer to divert (avoid) the OP's question
i guess that when you are strolling along this news group you must have an
interest in css and may be able to supply a_solution_for_the_world_wide_web ?!
if not, i really wonder what you are doing here.
You don't get it, do you?
Like Spartanicus has said just a few moments/posts ago:
<quote>
"Axel Dahmen" <NO*****@NoOneKnows.invalid> wrote:
I've posted this question a few months ago but didn't get a truly satisfying
answer then.
You most certainly did, no less than 33 replies.
So I'd like to post my question again:
What do we look like, a jukebox? Here are (the same) answers again, they
are still valid:
<http://groups-beta.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_frm/thread/6be6ea1e0f4c6e78/dae959b6bf7a4f41?tvc=1&q=Axel+Dahmen&_done=%2Fgrou p%2Fcomp.infosystems.www.authoring.stylesheets%2Fs earch%3Fgroup%3Dcomp.infosystems.www.authoring.sty lesheets%26q%3DAxel+Dahmen%26qt_g%3D1%26searchnow% 3DSearch+this+group%26&_doneTitle=Back+to+Search&s crollSave=&&d#dae959b6bf7a4f41>
</quote>
Now, go play with your crayons or start living your age.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Barbara de Zoete wrote: On Wed, 26 Jan 2005 20:05:54 +0100, Ali Babba <Al******@40Bandits.com>
wrote:
well then, why dont you give it a shot
or do you prefer to divert (avoid) the OP's question
i guess that when you are strolling along this news group you must
have an interest in css and may be able to supply
a_solution_for_the_world_wide_web ?! if not, i really wonder what you
are doing here.
You don't get it, do you?
<quote>
- i can read, you should have noticed - </quote>
quote you:
* To start with you last remark: Usenet is not a helpdesk.
# the purpose of usenet is not defined by you, fortunatly.
if people like make use of usenet as an helpdesk, so be it, not up to
you to decide how people make use of usenet.
quote you again:
* a solution that excludes (knowingly) gacko based browsers
_is_not_a_solution_for_the_world_wide_web.
# heheh, you make me laugh - now you also define what is good or bad for
the world_wide_web ?! you really have troubles to find solid ground
below your feet.
i bet you dont have a solution to OP's question that satisfies your own
criteria. in stead, you have lots of energy left over to crap on IE and
al those that use it.
last quote, just for fun:
* ... That includes a lot more than damned fucking IE, the basterd
crappy peace of shit .
# :) aren't we getting a bit carried away by out personal preferences.
On Wed, 26 Jan 2005 20:56:52 +0100, Ali Babba <Al******@40Bandits.com> wrote: Barbara de Zoete wrote:
On Wed, 26 Jan 2005 20:05:54 +0100, Ali Babba <Al******@40Bandits.com> wrote:
well then, why dont you give it a shot
or do you prefer to divert (avoid) the OP's question
i guess that when you are strolling along this news group you must have an
interest in css and may be able to supply a_solution_for_the_world_wide_web
?! if not, i really wonder what you are doing here.
You don't get it, do you?
<quote>
- i can read, you should have noticed -
Maybe you read, but somehow you don't get the content of the messages. Read back
in this newsgroup and read to understand. And try to get what the world wide web
is. It is so much more than fucking damn crappy old thing called IE for short.
Ofcourse I have a solution[1] as do many others. It's a simple and basic
question. If OP had read the first thread in the first place, he would have had
the solution too. An other way to find it, is Google for it. It is explained
numerous times. So, I don't have to and wont repeat over and over what is
already so easily obtainable knowledge.
Try understand 'We're no jukebox'[2].
Stop bothering me.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
[1]can be found on my side. Your loss is you don't speak Dutch :-P
[2]curteousy Spartanicus
> How can I center a DIV? The content in the DIV should be
left-aligned, but the DIV itself should be centered
There should be no fixed widths. The width of the DIV should be the
width of the content.
It's really hard. The key problem is that DIVs with width:auto
normally expand to occupy the available width in their container, so
putting margin-left/right: auto on them doesn't have the effect that
you want. It's quite a surprise that CSS doesn't have a natural way to
do this.
So you need to get a DIV whose width is the width of its contents. I
know of 3 ways to do this: tables, floats and position:absolute.
Unpleasant solutions include these two:
- Use a one-cell table:
<table style="margin: 0 auto; border: 1px solid green;"><tr><td>
<p>gergheriu heguiherg uierhgui rehg</p>
<p>uefheruifg hergfuiehr uehrg ueirgher</p>
</td></tr></table>
- Use a float, then jump through hoops to center it:
<div style="border: 1px solid red; position:relative; left:50%;">
<div style="border: 1px solid blue; float:left;">
<div style="border: 1px solid green; margin-left:-50%;
margin-right:50%;">
<p>gehrguirhg euigher uigh</p>
<p>gfheruig hguiergh reguerh g</p>
</div>
</div>
</div>
It works like this: the float in the middle forms a div that is based
on the width of its content rather than its container. The outer div
shifts this right so that its left edge is at the center of the page.
The inner div then shifts it back to the left by half of its width,
leaving it centered.
I don't know how cross-browser this is. I suspect it needs some
tweaking to work with IE (add text-align:center somewhere?). You will
need clear:left on the following content.
Can anyone simplify this?
--Phil. ph*******@treefic.com wrote: How can I center a DIV? The content in the DIV should be
left-aligned,
but the DIV itself should be centered
There should be no fixed widths. The width of the DIV should be the
width
of the content.
It's really hard. The key problem is that DIVs with width:auto
normally expand to occupy the available width in their container, so
putting margin-left/right: auto on them doesn't have the effect that
you want. It's quite a surprise that CSS doesn't have a natural way to
do this.
So you need to get a DIV whose width is the width of its contents. I
know of 3 ways to do this: tables, floats and position:absolute.
Unpleasant solutions include these two:
- Use a one-cell table:
<table style="margin: 0 auto; border: 1px solid green;"><tr><td>
<p>gergheriu heguiherg uierhgui rehg</p>
<p>uefheruifg hergfuiehr uehrg ueirgher</p>
</td></tr></table>
- Use a float, then jump through hoops to center it:
<div style="border: 1px solid red; position:relative; left:50%;">
<div style="border: 1px solid blue; float:left;">
<div style="border: 1px solid green; margin-left:-50%;
margin-right:50%;">
<p>gehrguirhg euigher uigh</p>
<p>gfheruig hguiergh reguerh g</p>
</div>
</div>
</div>
It works like this: the float in the middle forms a div that is based
on the width of its content rather than its container. The outer div
shifts this right so that its left edge is at the center of the page.
The inner div then shifts it back to the left by half of its width,
leaving it centered.
I don't know how cross-browser this is. I suspect it needs some
tweaking to work with IE (add text-align:center somewhere?). You will
need clear:left on the following content.
Can anyone simplify this?
--Phil.
my 2nd attempt: works in IE and FF/mozilla
without 'width: 0%' it doesnt work in IE
<div style="display: table; width: 0%; margin-left: auto; margin-right:
auto; border: 2px solid black;">
blabla<br>
ölrkgölgkad<br>
blabla<br>
</div>
got some help from http://www.allmyfaqs.com/faq.pl?Center_with_CSS
(who refers to a solution forwarded in 2001)
i didnt get it to work with floats
Ali Babba wrote: i bet you dont have a solution to OP's question that satisfies your own
criteria. in stead, you have lots of energy left over to crap on IE and
al those that use it.
Seems to me that you (All Babble) are the one that doesn't have a
solution. Sorry, but Barbara is correct. A "solution" for one browser
only is NO solution. There are many browsers used on the World Wide
Web. If you had visited and read what was at the link that Spartanicus
provided, you would probably (I didn't look) have seen about 33 solutions.
last quote, just for fun:
* ... That includes a lot more than damned fucking IE, the basterd
crappy peace of shit .
# :) aren't we getting a bit carried away by out personal preferences.
Personal preference has nothing to do with it. This group is full of
professionals and all of the professionals know that IE does not render
according to the W3C recommendations. Bill and his cohorts decided they
were going to make thier own "standards." We have to fight our coding
all of the time just to make things look halfway decent in IE often
breaking the way that things should display in other browsers because of it.
As has been said, this is a discussion group, not a helpdesk. We
discuss. Clueless newbies give bad advice (try to be a helpdesk).
--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
On Wed, 26 Jan 2005 19:47:40 +0100, Ali Babba <Al******@40Bandits.com>
wrote:
[snip] in case you mean, 'in general', you are completely wrong, as most people
use IE.
Not for long. One web site I operate has seen IE useage go from 96% in
December to an average daily rate of less than 65% in this month,
January -- due primarily, almost exclusively, to the increased use of
Firefox. And the site isn't a technical-specialty site. It attracts
average users, with average computers, interested in viewing vintage
Japanese postcards.
So, if a solution doesn't work in Gecko, it's not really a solution at
all.
> my 2nd attempt: works in IE and FF/mozilla without 'width: 0%' it doesnt work in IE
We had this alreadey. If your page isn't in quirks-mode it works with
<div style="margin-left: auto; margin-right: auto;"> [...]
And Barabara is right about IE.
Chris
Uncle Pirate wrote:
... A "solution" for one browser
only is NO solution. There are many browsers used on the World Wide
Web.
a solution for IE is a solution for IE, and that is what i proposed,
like it or not.
a solution for the world wide web is something you nor barbara have not
been able to define. i guess it should at least include your favorite
browser. i bet your css works in IE, FF, mozilla, netscape 6, netscape
4, 3 2 1 and all other browsers you can find ??
lets make one thing clear, i am not an IE advocate, nor am i a
unfavorable towards FF, mozilla or any other browser. i think its very
good that there is competition among browsers, and none of them is
perfect ! you should know, in the country of blind men, one-eye is king,
and that is not mozilla or a doughter of his.
... you would probably (I didn't look) have seen about 33 solutions.
sigh, 33 replies is no 33 solutions. shot from the hip and missed.
last quote, just for fun:
* ... That includes a lot more than damned fucking IE, the basterd
crappy peace of shit .
# :) aren't we getting a bit carried away by out personal
preferences.
Personal preference has nothing to do with it. This group is full of
professionals and all of the professionals know that IE does not render
according to the W3C recommendations. Bill and his cohorts decided they
were going to make thier own "standards." We have to fight our coding
all of the time just to make things look halfway decent in IE often
breaking the way that things should display in other browsers because of
it.
poor boy, fighting bill and cohorts, hehe
very entertaining
btw.. it is personal preference, since some parts of css2.1 are better
addopted by IE than by FF. try the many display: options in css2.1 you
will see that FF has a lot of catching up to do. an outspoken opinion on
1 browser is thus completely not justified. as i said, no browser is
perfect and still we are able to do pretty well with what we have.
Ali Babba wrote: Uncle Pirate wrote:
... A "solution" for one browser only is NO solution. There are many
browsers used on the World Wide Web.
a solution for IE is a solution for IE, and that is what i proposed,
like it or not.
a solution for the world wide web is something you nor barbara have not
been able to define. i guess it should at least include your favorite
browser. i bet your css works in IE, FF, mozilla, netscape 6, netscape
4, 3 2 1 and all other browsers you can find ??
Definitely not. But I try to make things appear decently in as wide a
range as possible. Your "solution for IE" still is not a solution at
all unless the pages are going to be on an intranet where using IE is
mandatory.
lets make one thing clear, i am not an IE advocate, nor am i a
unfavorable towards FF, mozilla or any other browser. i think its very
good that there is competition among browsers, and none of them is
perfect ! you should know, in the country of blind men, one-eye is king,
and that is not mozilla or a doughter of his.
I would feel the same about a "solution for Mozilla" if the "solution"
did not work in IE. I do realize that IE is the predominant browser in
use; that's why I do use it to look at my work as well as look in
several other browsers.
... you would probably (I didn't look) have seen about 33 solutions.
sigh, 33 replies is no 33 solutions. shot from the hip and missed.
You're right on this one. As I said, I didn't check the link and read
the replies. I'd be willing to bet, however, that there are at least a
couple of good methods discussed in those 33 replies.
last quote, just for fun:
* ... That includes a lot more than damned fucking IE, the basterd
crappy peace of shit .
# :) aren't we getting a bit carried away by out personal
preferences.
Personal preference has nothing to do with it. This group is full of
professionals and all of the professionals know that IE does not
render according to the W3C recommendations. Bill and his cohorts
decided they were going to make thier own "standards." We have to
fight our coding all of the time just to make things look halfway
decent in IE often breaking the way that things should display in
other browsers because of it.
poor boy, fighting bill and cohorts, hehe
very entertaining
I could care less about bill and his cohorts; it does irritate me when I
complete a page using valid HTML and CSS, then have to break it to make
it look halfway decent in IE.
btw.. it is personal preference, since some parts of css2.1 are better
addopted by IE than by FF. try the many display: options in css2.1 you
will see that FF has a lot of catching up to do. an outspoken opinion on
1 browser is thus completely not justified. as i said, no browser is
perfect and still we are able to do pretty well with what we have.
I use some CSS2 but stick mostly to CSS1 as it is more widely supported.
You did say something else here I agree with: "no browser is perfect"
and that is exactly what I am talking about. Personally, I am not
picking on any particular browser; as I said, creating pages for the WWW
entails creating pages for the widest range possible. There are always
going to be limiting factors where decisions have to made as to where to
draw the line.
--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
>>> ... you would probably (I didn't look) have seen about 33 solutions.
sigh, 33 replies is no 33 solutions. shot from the hip and missed.
You're right on this one. As I said, I didn't check the link and read
the replies. I'd be willing to bet, however, that there are at least a
couple of good methods discussed in those 33 replies.
hee man, you shoot from the hip again !! are you a cowboy or something
?! .. LOL
although we will probably never agree on the 'solution' thing, but i
think we already agree on so many things that i almost wanne hug ya :)
gl
martin
Ali Babba wrote: hee man, you shoot from the hip again !! are you a cowboy or something
?! .. LOL
Well, I do live in NM. :)
although we will probably never agree on the 'solution' thing, but i
think we already agree on so many things that i almost wanne hug ya :)
We don't need to go that far, but yes, I think we have found some common
ground.
--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
center works in FF and IE: margin: 0 auto;
> You most certainly did, no less than 33 replies.
You surely have noticed that they only supposed solutions having a fixed
width, didn't you?
> You're right on this one. As I said, I didn't check the link and read the replies.
You should. It ended up in an OT discussion like this one... :/
I'd be willing to bet, however, that there are at least a
couple of good methods discussed in those 33 replies.
Nope. Actually there was... wait a moment, let me count... there was only
one. And it used a fixed with div.
So here we go... This thread again only contains one single useful reply.
Thanks to Phil!
> what works in IE: (doesnt work in gecko based browsers !) <center>
[ - snip - ] </center>
Thanks, Martin, for trying to help. Actually, <CENTER> has been deprecated
as of HTML 4.0.
Applause! You provided two really elaborated solutions indeed. I
particularly love your second solution. You've created a true work of art...
;)
Actually I'm using the One-Cell-Table solution myself as a workaround. But
in my opinion it's too much ado to create a TABLE infrastructure just to get
a centered DIV.
But I think Martin has a good solution there....
Regards,
Axel
-------------
<ph*******@treefic.com> schrieb im Newsbeitrag
news:11*********************@c13g2000cwb.googlegro ups.com... How can I center a DIV? The content in the DIV should be
left-aligned, but the DIV itself should be centered
There should be no fixed widths. The width of the DIV should be the
width of the content.
It's really hard. The key problem is that DIVs with width:auto
normally expand to occupy the available width in their container, so
putting margin-left/right: auto on them doesn't have the effect that
you want. It's quite a surprise that CSS doesn't have a natural way to
do this.
So you need to get a DIV whose width is the width of its contents. I
know of 3 ways to do this: tables, floats and position:absolute.
Unpleasant solutions include these two:
- Use a one-cell table:
<table style="margin: 0 auto; border: 1px solid green;"><tr><td>
<p>gergheriu heguiherg uierhgui rehg</p>
<p>uefheruifg hergfuiehr uehrg ueirgher</p>
</td></tr></table>
- Use a float, then jump through hoops to center it:
<div style="border: 1px solid red; position:relative; left:50%;">
<div style="border: 1px solid blue; float:left;">
<div style="border: 1px solid green; margin-left:-50%;
margin-right:50%;">
<p>gehrguirhg euigher uigh</p>
<p>gfheruig hguiergh reguerh g</p>
</div>
</div>
</div>
It works like this: the float in the middle forms a div that is based
on the width of its content rather than its container. The outer div
shifts this right so that its left edge is at the center of the page.
The inner div then shifts it back to the left by half of its width,
leaving it centered.
I don't know how cross-browser this is. I suspect it needs some
tweaking to work with IE (add text-align:center somewhere?). You will
need clear:left on the following content.
Can anyone simplify this?
--Phil.
> <div style="display: table; width: 0%; margin-left: auto; margin-right: auto; border: 2px solid black;">
blabla<br>
ölrkgölgkad<br>
blabla<br>
</div>
I think this is it! It seems a correct solution. I guess it's a bug for IE
not using the correct layout if the "width: 0%" is missing. But as width is
ignored for "display: table" according to http://www.w3.org/TR/2003/WD-CSS21-2...o-table-layout,
it doesn't break the code anyway.
Thank you for helping me with this great idea! :)
Regards,
Axel
Axel Dahmen wrote: You're right on this one. As I said, I didn't check the link and read
the replies.
You should. It ended up in an OT discussion like this one... :/
I'd be willing to bet, however, that there are at least a
couple of good methods discussed in those 33 replies.
Nope. Actually there was... wait a moment, let me count... there was only
one. And it used a fixed with div.
So here we go... This thread again only contains one single useful reply.
Thanks to Phil!
The previous thread mentioned is understandably of not much help since
it offers no real solution, is full of verbal diarrhea and verbal abuse
just as this thread here, affectionately referred to in this newsgroup
as "discussion".
I will restrict response to conforming methods and not to deprecated
elements such as <center> or the use of any <table>. In order to avoid
any misguided "discussion", be advised that I offer no solution for all,
but just what I can pass on. If this is not enough, click out now.
Centering is no problem, but where the difficulty appears is with the
requirement of a flexible width div. I see only one *conforming* way
with display:inline-block but it is only supported by Opera at this
time. The /closest/ I can come otherwise is to use display:inline with
left and right percentage margins (text is not properly centered).
..wrapper {text-align:center;border:1px solid blue;}
..base {display:inline-block;text-align:left;border:1px solid red;}
..wrapper1 {margin:0 40%;border:1px solid blue;}
..base1 {margin:auto;display:inline;text-align:left;border:1px solid red;}
<div class="wrapper">
<div class="base">
Foo<br>
Another foo<br>
Still a foo-bar<br>
</div>
</div>
<div class="wrapper1">
<div class="base1">
Foo<br>
Another foo<br>
Still a foo-bar<br>
</div>
</div>
--
Gus
Axel Dahmen wrote: <div style="display: table; width: 0%; margin-left: auto; margin-right:
auto; border: 2px solid black;">
blabla<br>
ölrkgölgkad<br>
blabla<br>
</div>
I think this is it! It seems a correct solution. I guess it's a bug for IE
not using the correct layout if the "width: 0%" is missing. But as width is
ignored for "display: table" according to
http://www.w3.org/TR/2003/WD-CSS21-2...o-table-layout,
it doesn't break the code anyway.
Thank you for helping me with this great idea! :)
Regards,
Axel
Works great for me except for one small item that has to be noted. On an
interword space a new line is generated, so must be used instead.
--
Gus
"Axel Dahmen" <NO*****@NoOneKnows.invalid> wrote: You most certainly did, no less than 33 replies.
You surely have noticed that they only supposed solutions having a fixed
width, didn't you?
That wasn't part of the original question, you can't expect a correct
answer if you omit that. If you then start a new thread instead of
making this clear in the original thread, whilst complaining that your
earlier question wasn't answered properly you can expect the response
you got.
The correct answer (a FAQ in this group btw) is that the proper method
to achieve what you want is to use an inline-block element, like so:
<div style="text-align:center">
<div style="display:inline-block;text-align:left">
Foo<br>
Another foo<br>
Still a foo-bar<br>
</div>
</div>
This is currently supported by Opera (buggy), iCab and Safari, it can be
hacked to work in IE, but it's not supported in Gecko based browsers.
For a single instance of the inner box you could use a css table, but
this is not supported by IE at all.
Although it's probably possible to create something that works in all
modern browsers + IE, the solution would be so convoluted that you are
better of scrapping the idea, or use html tables.
--
Spartanicus
*Axel Dahmen* <NO*****@NoOneKnows.invalid>:
How can I center a DIV?
You certainly already know about 'auto' margins and the 'text-align'
workaround for IE, because that's a FAQ.
There should be no fixed widths.
To horizontally center anything, there have to be some widths known, i.e.
either specified or calculatable.
The width of the DIV should be the width of the content.
Thus if it's text, there's only one line. Block widths are 100% of the
available by default. There are ways in CSS to make that the required
width only. Unfortunately they are either hackish or poorly supported, or
both.
Floats are shrink-wrapped since CSS*2.1 and in many browsers already, but
that would be the most hackish way. The other major approach is 'display'
with a value of 'inline', 'inline-block', 'inline-table' or even 'table'.
Multiple consecutive rules with these values may make this work in most
CSS capable browsers. 'text-align' or 'margin' have to be used accordingly.
Anyway, a concrete example page would help. For example to decide, whether
'div' should be used at all.
--
"The squeaking wheel doesn't always get the grease.
Sometimes it gets replaced."
Vic Gold
> That wasn't part of the original question, you can't expect a correct answer if you omit that. If you then start a new thread instead of
making this clear in the original thread, whilst complaining that your
earlier question wasn't answered properly you can expect the response
you got.
Here's a quote from that previous thread:
"And actually I'm not really satisfied with providing a fixed width. I'd
prefer to have the with of the div be the width required by the content. Is
there a solution without providing a width?"
That question (which was an immediate follow-up) remained unanswered...
The correct answer (a FAQ in this group btw) is that the proper method
to achieve what you want is to use an inline-block element, like so:
<div style="text-align:center">
<div style="display:inline-block;text-align:left">
Foo<br>
Another foo<br>
Still a foo-bar<br>
</div>
</div>
This is currently supported by Opera (buggy), iCab and Safari, it can be
hacked to work in IE, but it's not supported in Gecko based browsers.
For a single instance of the inner box you could use a css table, but
this is not supported by IE at all.
Although it's probably possible to create something that works in all
modern browsers + IE, the solution would be so convoluted that you are
better of scrapping the idea, or use html tables.
That's exactly what I wanted to know. Thank you. :)
Axel
Gus Richter wrote: Axel Dahmen wrote:
<div style="display: table; width: 0%; margin-left: auto; margin-right:
auto; border: 2px solid black;">
blabla<br>
ölrkgölgkad<br>
blabla<br>
</div>
I think this is it! It seems a correct solution. I guess it's a bug
for IE
not using the correct layout if the "width: 0%" is missing. But as
width is
ignored for "display: table" according to
http://www.w3.org/TR/2003/WD-CSS21-2...o-table-layout,
it doesn't break the code anyway.
Thank you for helping me with this great idea! :)
Regards,
Axel
Works great for me except for one small item that has to be noted. On an
interword space a new line is generated, so must be used instead.
Add white-space:nowrap; instead and use the normal interword space.
--
Gus This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Alex |
last post by:
Hi Everone,
I need some advice on how to setup 4 columns where the outside two are
absolute (120px) and the inner two (side by side) are relevent (Fluid)
and change with the screen.
Here's my...
|
by: Claude Shea |
last post by:
Is DB2 Development Center an addon product that I have to download or
purchase separately? I can't seem to find it in any of my downloads
or on any of my CDs. Is it available for all versions of...
|
by: Henry Reardon |
last post by:
I have been having problems with the Development Center for several days
now. It seemed to be working fine when I initially installed DB2 (LUW)
Version 8 (FP7) and upgraded to FP8, except that I...
|
by: Joey |
last post by:
Does anyone know how to center this sample webpage in Firefox? If so,
will you provide the example as it applies to this sample webpage? I
have read numerous posts and articles on how to center...
|
by: judacris |
last post by:
I've seen the threads here about molding 2 divs in a centered fashion. but I can't seem to solve this thing.
my blogger blog is functioning well on my site for now, but the blog feed (left) and...
|
by: GloStix |
last post by:
I'm trying to center this banner, it's in a div that has the same width so it's not exactly "centering" but it's screwed up, It works in safari but in Firefox it's messed up. I uploaded a Video to...
|
by: yangtono |
last post by:
Hi,
I am creating a table to list some data. The table is using a sorting and highlight function that I found from the net.
I can't attach image here, basically html will wrap the heading,...
|
by: gaijinco |
last post by:
I was a hobbist web coder for years but I had to sidestep for a while.
Now I'm trying to return to it and I'm trying to clarify how am I
supposed to do somethings with CSS v.s. HTML and I'm...
|
by: Stevo |
last post by:
I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
...
|
by: dougancil |
last post by:
I have a web page that I converted from a psd file to html with Photoshop and imported into Dreamweaver. The problem I'm having is that some viewers comment on the fact that the page is left...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |
