473,225 Members | 713 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,225 software developers and data experts.

to center using CSS... a bit weird?

in

http://www.0011.com/test_size3.html

to center the logo "HTML 4.01 check" button at the bottom of the page,
I used

<div style="width: 10px; margin: 0px auto">

</div>

to wrap around that button....

if using HTML, i would have used <center>

However, I know the 10px above is wrong... I could use 60px or
100px... which is closer to the size of that image there.... however,
does that mean I need to know exactly what width that image is to
properly center it?

because while in HTML, I just need to use <centerand forget about
it... how come CSS requires knowing the size... so if Peter comes in
and change to a different image, and he didn't know about changing the
width for the CSS style, then it is not properly centered?

Oct 28 '07 #1
14 2290
On Sun, 28 Oct 2007 04:28:50 -0700, Summercool wrote:
in

http://www.0011.com/test_size3.html

to center the logo "HTML 4.01 check" button at the bottom of the page,
I used

<div style="width: 10px; margin: 0px auto">

</div>

to wrap around that button....

if using HTML, i would have used <center>

You *are* using HTML, it's just that <centeris long deprecated as
presentation should be specified through CSS.

However, I know the 10px above is wrong... I could use 60px or
100px... which is closer to the size of that image there.... however,
does that mean I need to know exactly what width that image is to
properly center it?

CSS has the 'text-align' property, which actually applies to all inline
content of an element. You just need something of the following form,
replacing the ellipses with the relevant attributes:
<div style="text-align:center;">
<a ...><img ...></a>
</div>
--
Safalra (Stephen Morley)

The 'white-space' Property In CSS:
http://www.safalra.com/web-design/cs...pace-property/
Oct 28 '07 #2
On Oct 28, 5:13 am, "Safalra (Stephen Morley)" <use...@safalra.com>
wrote:
>
CSS has the 'text-align' property, which actually applies to all inline
content of an element. You just need something of the following form,
replacing the ellipses with the relevant attributes:

<div style="text-align:center;">
<a ...><img ...></a>
</div>
that's nice... how about to center a textbox... inside the textbox
the text should be left-justified.
in that case, then use <div style="width: 100px; margin: 0 auto" ?

so... to center text and img, use "text-align:center"
to center a div, use fixed width and auto left and right margin...

any more case to consider besides text/img vs div? i wonder why this
disparity... wasn't it somewhat more elegant using <center?
Oct 28 '07 #3
On Sun, 28 Oct 2007 06:45:15 -0700, Summercool wrote:
[snip centring things]
so... to center text and img, use "text-align:center"
to center a div, use fixed width and auto left and right margin...

any more case to consider besides text/img vs div? i wonder why this
disparity... wasn't it somewhat more elegant using <center?

No - mixing content and presentation is decidedly inelegant. Of course
you're still doing that by using the style attribute, but the next step is
to move on to external stylesheets and leave your HTML pure and semantic.
On that topic, and to answer your other question, tables don't need a width
to be centred - the following code in a stylesheet will centre all tables:
table{
margin:0 auto;
}
--
Safalra (Stephen Morley)

The 'white-space' Property In CSS:
http://www.safalra.com/web-design/cs...pace-property/
Oct 28 '07 #4
Summercool wrote:
wasn't it somewhat more elegant using <center?
<centeris presentational. All 'presentation' should be in CSS now.

Let's say you have old pages with <centersprinkled throughout. If you
decide later that looks amateurish (it does), you would have to prowl
through all the markup removing those tags, <center... </center>

With CSS, and _one_ text-align: center; in the CSS, you can change to
left-justify for your entire site simply by removing that _one_ line
from the CSS. (for a simple site... but you get the idea. <g>)

--
-bts
-Motorcycles defy gravity; cars just suck
Oct 28 '07 #5
On Oct 28, 7:57 am, "Beauregard T. Shagnasty"
<a.nony.m...@example.invalidwrote:
Summercool wrote:
wasn't it somewhat more elegant using <center?

<centeris presentational. All 'presentation' should be in CSS now.

Let's say you have old pages with <centersprinkled throughout. If you
decide later that looks amateurish (it does), you would have to prowl
through all the markup removing those tags, <center... </center>

With CSS, and _one_ text-align: center; in the CSS, you can change to
left-justify for your entire site simply by removing that _one_ line
from the CSS. (for a simple site... but you get the idea. <g>)
that's nice... i get the idea.
now how about... the <div style="clear: both"</div after
floating items (div's)

doesn't that line have to be integrated with the content? any other
method that you don't have to mix it with content?
Oct 29 '07 #6
cf
let it be known on Sun, 28 Oct 2007 04:28:50 -0700
Summercool <Su************@gmail.comscribed:

|in
|
| http://www.0011.com/test_size3.html
|
|to center the logo "HTML 4.01 check" button at the bottom of the page,
|I used
|
|<div style="width: 10px; margin: 0px auto">
|
|</div>
|
|to wrap around that button....
|
|if using HTML, i would have used <center>
|
|However, I know the 10px above is wrong... I could use 60px or
|100px... which is closer to the size of that image there.... however,
|does that mean I need to know exactly what width that image is to
|properly center it?
|
|because while in HTML, I just need to use <centerand forget about
|it... how come CSS requires knowing the size... so if Peter comes in
|and change to a different image, and he didn't know about changing the
|width for the CSS style, then it is not properly centered?
|

If you have Firefox installed (you should anyway to check you pages/site) you should download and install the Firebug add-in.

IMHO I think it's very good at showing what the different elements are when you hover over them in the tree and it highlights that element in the page (you'll have to install it to understand, sorry). It helped me understand where the margins and paddings are added to the overall div and so on.

<http://www.mozilla.com/en-US/>
<https://addons.mozilla.org/en-US/firefox/>

hth
--
cf <cf****@NOcharterSPAM.net>
I may be dumb, but I'm not stupid.
Terry Bradshaw
Oct 29 '07 #7
On Oct 28, 11:36 pm, Summercool <Summercooln...@gmail.comwrote:
On Oct 28, 7:57 am, "Beauregard T. Shagnasty"

<a.nony.m...@example.invalidwrote:
Summercool wrote:
wasn't it somewhat more elegant using <center?
<centeris presentational. All 'presentation' should be in CSS now.
Let's say you have old pages with <centersprinkled throughout. If you
decide later that looks amateurish (it does), you would have to prowl
through all the markup removing those tags, <center... </center>
With CSS, and _one_ text-align: center; in the CSS, you can change to
left-justify for your entire site simply by removing that _one_ line
from the CSS. (for a simple site... but you get the idea. <g>)

that's nice... i get the idea.
now how about... the <div style="clear: both"</div after
floating items (div's)

doesn't that line have to be integrated with the content? any other
method that you don't have to mix it with content?
by the way, isn't the <b and <br also somewhat "presentational"
too? how come those can pass the Strict...
Oct 29 '07 #8
In article
<11**********************@q5g2000prf.googlegroups. com>,
Summercool <Su************@gmail.comwrote:

(some talk about <center>...)
by the way, isn't the <b and <br also somewhat "presentational"
too? how come those can pass the Strict...
The idea about center is that it can be done in css well. I have
heard arguments to and fro about <band semantics and I have no
clear picture. But about <br>, this seems to me to have some
meaning, it is not mere style in a poem that one line ends and
another begins, it is part of the poem that cannot be done away
with; it is not as if there could as easily be alternatives. So
perhaps <brhas an informational content, a meaning in some
contexts.

--
dorayme
Oct 29 '07 #9
dorayme wrote:
Summercool <Su************@gmail.comwrote:

(some talk about <center>...)
>by the way, isn't the <b and <br also somewhat "presentational"
too? how come those can pass the Strict...
I stopped using <ba long time ago, preferring <strong>.
The idea about center is that it can be done in css well. I have
heard arguments to and fro about <band semantics and I have no
clear picture. But about <br>, this seems to me to have some
meaning, it is not mere style in a poem that one line ends and
another begins, it is part of the poem that cannot be done away
with; it is not as if there could as easily be alternatives. So
perhaps <brhas an informational content, a meaning in some
contexts.
I do little poetry, but <brworks well with it. Or .. use a styled
<preelement.

<pre class="poetry">
There once was a man from Nantucket<br>
....
</pre>

<bralso makes perfect sense in an <address>.

--
-bts
-Motorcycles defy gravity; cars just suck
Oct 29 '07 #10
On Oct 28, 4:28 am, Summercool <Summercooln...@gmail.comwrote:
in

http://www.0011.com/test_size3.html

to center the logo "HTML 4.01 check" button at the bottom of the page,
I used

<div style="width: 10px; margin: 0px auto">

</div>

to wrap around that button....

if using HTML, i would have used <center>

However, I know the 10px above is wrong... I could use 60px or
100px... which is closer to the size of that image there.... however,
does that mean I need to know exactly what width that image is to
properly center it?

because while in HTML, I just need to use <centerand forget about
it... how come CSS requires knowing the size... so if Peter comes in
and change to a different image, and he didn't know about changing the
width for the CSS style, then it is not properly centered?
Drop the width, display the image as a block level element and the
image will center. i.e.
html:
<div id="valid"><img src="whereverUhaveIt"></div>
css:
#valid img {
display: block;
margin: 0 auto;
text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/
}
HTH
Bill

Oct 30 '07 #11
transformer wrote:
>
html:
<div id="valid"><img src="whereverUhaveIt"></div>
css:
#valid img {
display: block;
margin: 0 auto;
text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/
}
Actually, you can drop display:block and margin:auto.
text-align:center should do all by itself.

--
Berg
Oct 30 '07 #12
On Oct 29, 9:34 pm, Bergamot <berga...@visi.comwrote:
transformer wrote:
html:
<div id="valid"><img src="whereverUhaveIt"></div>
css:
#valid img {
display: block;
margin: 0 auto;
text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/
}

Actually, you can drop display:block and margin:auto.
text-align:center should do all by itself.

--
Berg
Berg,
text-align: center doesn't do it. In FF and Opera and IE, the image
will display flush left in the containing div. To get the img centered
in those browsers, both of the other rules are needed. There may be
another way to do it then thw display: block, margin: auto, but text-
align: center by itself isn't it.

If I declare a width the size of the image on the containing div, then
I can set the margin to auto and it will be centered in ff, opera and
IE6 & 7 (didn't test it on others); text-align: center can be added to
center the img in IE5.5.

But, I understood the original questioner (summercool?) to be asking
how to do this without knowing the width for the image, so that's what
I came up with
Bill

Oct 30 '07 #13
On 2007-10-30, transformer <sm****************@gmail.comwrote:
On Oct 29, 9:34 pm, Bergamot <berga...@visi.comwrote:
>transformer wrote:
html:
<div id="valid"><img src="whereverUhaveIt"></div>
css:
#valid img {
display: block;
margin: 0 auto;
text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/
}

Actually, you can drop display:block and margin:auto.
text-align:center should do all by itself.

--
Berg

Berg,
text-align: center doesn't do it.
No you need to set text-align: center on the _container_ not on the img
itself. Setting it on the img itself is meaningless as it is a replaced
element and doesn't itself contain any text.
In FF and Opera and IE, the image
will display flush left in the containing div. To get the img centered
in those browsers, both of the other rules are needed.
But not text-align: center. You're centering the img as a block (which
works fine), Bergamot is centering it as an inline.
Oct 30 '07 #14
On Oct 30, 1:17 am, Ben C <spams...@spam.eggswrote:
On 2007-10-30, transformer <smallvoiceshout...@gmail.comwrote:
On Oct 29, 9:34 pm, Bergamot <berga...@visi.comwrote:
transformer wrote:
html:
<div id="valid"><img src="whereverUhaveIt"></div>
css:
#valid img {
display: block;
margin: 0 auto;
text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/
}
Actually, you can drop display:block and margin:auto.
text-align:center should do all by itself.
--
Berg
Berg,
text-align: center doesn't do it.

No you need to set text-align: center on the _container_ not on the img
itself. Setting it on the img itself is meaningless as it is a replaced
element and doesn't itself contain any text.
In FF and Opera and IE, the image
will display flush left in the containing div. To get the img centered
in those browsers, both of the other rules are needed.

But not text-align: center. You're centering the img as a block (which
works fine), Bergamot is centering it as an inline.
Ben C, Berg and all,
You're right; I stand corrected. I thought I had run thru all the
combinations of settings on the container AND the image, but must have
gotten confused in my own tests :-). So centering text-align: center
on the containing div does center the img in all browsers after all!

I apologize if my error confused anyone on the list.
Bill

Oct 30 '07 #15

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

Similar topics

3
by: Ahmed Jewahar | last post by:
Hi All, I'm new to this forum as well as new to ASP.NET. My backgorund is ASP. But, I'm just doing my .NET course with MS Certified training center currently. I have couple of questions (it...
2
by: The Plankmeister | last post by:
Hi... What's an equivalent of doing: <center>hello!</center> in 4.01 strict? I'm using stylesheets and am telling the various selectors I want to be centred to "text-align : center;" but...
1
by: Doug Ly | last post by:
Hi , connect to Blah user blah using blah ------------------------------------------------------------------------ Database Connection Information Database server = DB2/6000 7.2.3...
11
by: Hoku | last post by:
I am using dual monitors on a dual head ATI AGP4x video card. I installed the Nov 11 2005 release of ATI's catalyst control center with Hydravision to manage the dual monitor setup. I recently...
1
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...
0
by: nstefi | last post by:
Hi everybody, I installed DB2 version 7 a few times, I always had some issues with the installation. Now finally seems to be ok, but there is something weird when I want to copy a table from one...
1
by: Summercool | last post by:
since the way we center a div in a page is usually fix a width: 600px and then set margin left and right both "auto"... so what if we don't know the width in advance, or want it to be automatic?...
14
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...
13
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. ...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
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: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
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
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
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"....

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.