simple problem – centering an image

@jpmoriartyDec 03.2002

This bloody css – it just seems to be over complicated if you ask me… but anyway, I’m trying, so here’s my latest problem.

All I want is a centred image! I’ve used some code that stafan developed for me to achieve a certain effect, and now I cant for the life of me get the image to go in the centre of the box. Here’s my CSS code:

body {margin:10px; color:white; font-family: tahoma, arial ;}

#left {width:65%; float:left; border:1px solid #C00000; background:#CFD0E7; margin: 0 0 0 0;}
#right {margin:0 0 20px 67%; border:1px solid #C00000; background:#CFD0E7;}

#left div {width:100px; height:100px; float:left; background:#A5A8C9; margin:5px 5px 5px 5px; border:1px solid #c00000; text-align:left;}

#left img {margin: 2px ; float:center ; border:1px solid #C00000 ; clear:both }
#right img { margin: 10px ; left: 50% ;}

h1 {color:white; font-size:100%; text-align:left; background:#C00000; border:3px solid #C00000 ; margin: 0 0 0px 0 ;}
h2 {color:#161F7A; font-size:100%; text-align:center; margin:5px ; font-weight: bold ;}
h3 {color:#161F7A; font-size:80%; text-align:left; margin:5px ; font-weight: bold ;}
p {color:#52567C; font-size:80%; text-align:left; margin:5px ;}
ul {color:#52567C; font-size:80%; text-align:left; margin:5px ; list-style: outside ;}
li {color:#52567C; font-size:100%; text-align:left; margin:5px 5px 5px 25px ; list-style: disc ;}

I want the right hand box to have an image in it which is centred horizontally – can u help guys??!! Many thanks in advance,

John

to post a comment

CSS

13 Comments(s) _↴

@VladdyDec 03.2002 — #Got a link, or html code?

? meanwhile... see my sig ... ?

@jpmoriartyauthorDec 03.2002 — #didn't actually think you'd need it but here you go...

<div id="right">

<img src='citizenship.gif' height=150 width=150 alt='Citizenship logo' align=center>

</div>

Think the original style sheet might be more useful to you though, so refer you again to my above post.

@VladdyDec 03.2002 — #HTML and CSS go together.

The way your div is rendered depends on its parent style.

As is, there is no reason for the "right" div to be wider than the image, so your aligning attempts won't work.

If there is more within the div, post the complete html code and your chances to get help on these boards increases.

@jpmoriartyauthorDec 03.2002 — #no there is no more. I just want the image to align with the centre of the box that has been created.

@VladdyDec 03.2002 — #Your "right" div width is auto by default, therefore with the image inside it adjusts to the width of the image. There is no alignment possible then the containg element has the same width as the element you are trying to center.

You might want to change you declarations as follows:

#right {margin:0px 0px 20px 67%; width:33%; border:1px solid #C00000; background:#CFD0E7; text-align:center;}

Oh, and no align attribute for the image.

@StefanDec 04.2002 — #[i]Originally posted by Vladdy [/i]

{margin:0px 0px 20px 67%; width:33%; border:1px solid #C00000; [/QUOTE]

Of cource 67% + 33% + 2px will force a horizontal scrollbar at al possible resolutions in a nonbuggy browser ?

I would go with eg width:32% instead ?

Also
Your "right" div width is auto by default, therefore with the image inside it adjusts to the width of the image. [/QUOTE]

That is only true about a floated or positioned <div>.

A <div> in normal flow will use up all available screenspace with width:auto;

@StefanDec 04.2002 — #[i]Originally posted by jpmoriarty [/i]

#left img {margin: 2px ; float:center ; border:1px solid #C00000 ; clear:both }
[/QUOTE]

There is no such thing as float:center; (yet).

You can only float someting to the left or right.

I want the right hand box to have an image in it which is centred horizontally - can u help guys??!!
[/QUOTE]

text-align:center will center an image in normal flow (remove that weird float stuff on the image).

Here is some example code for a sanity check

<div style="margin:0 0 20px 67%; text-align:center; border:1px solid #C00000; background:#CFD0E7;">

<img src='citizenship.gif' height=150 width=150 alt='Citizenship logo'>

</div>

That should place your image in the center of the box.

Complain if it doesn't ?

@jpmoriartyauthorDec 04.2002 — #vladdy was on the right tracks beforehand, but thanks all the same guys - actually it turns out vladdy that doing the "width 33%" makes the column 33% of the width of the [I]remainder[/I] of the page, so in other words i had my big left hand column and then the right one only took up 33% of the 33% that was left (ie 11% of the screen total), so i just changed it to width 100% and it seems okay now. but you were right in that it didnt realise how big the column was and therefore where to centre it, so i suspect stefan that your code won't actually work (am fairly sure I tried that one yesterday - i know the one i posted wasnt fab, that's because I'd tried so many variations that i was just trying anything in an attempt to get it to work!)

Why has that w3c thing that you showed me the link for got so little on images? am i just looking in the wrong place??

@StefanDec 04.2002 — #[i]Originally posted by jpmoriarty [/i]

doing the "width 33%" makes the column 33% of the width of the [I]remainder[/I] of the page,[/QUOTE]

To me this smells like you are working with an old buggy IE 5.0 version.

That browser is severly broken with CSS.

Upgrade to at least IE 5.5 (or better yet download Mozilla or Opera 7) and you will see that 33% is 33% of the screen.

so i just changed it to width 100% and it seems okay now.
[/QUOTE]

Not in any good browser (including IE 5.5 +)

Which btw is 80%+ of the browsers used...

Why has that w3c thing that you showed me the link for got so little on images? am i just looking in the wrong place?? [/B][/QUOTE]

The reason is that images are handled the exact same way like other content in CSS. There are no special rules in regard to images that you have to keep in mind.

An image is just normal inline-level content just like eg text.

@jpmoriartyauthorDec 04.2002 — #well this is just confusing the hell out of me.

I'm using IE 6.0 and netscape 7.0 - when i left last night everything was working okay. Then this morning, it was giving me grief over the column being 33% of the remainder of the screen, so I changed it to 100%. That worked okay, and now that I'm back this afternoon, netscape is making the column as wide as the screen and IE isn't displaying the css at all. I'm going to fiddle around some more to try and get this to work, but it all seems so f**king tempermental and the support is so bloody inconsistent that I think I'm going to give a big two fingers to those who say I shouldnt use tables to do layout cos it was a darn sight easier than messing around with this.

@StefanDec 04.2002 — #[i]Originally posted by jpmoriarty [/i]

I'm going to fiddle around some more to try and get this to work, but it all seems so f**king tempermental [/QUOTE]

I've also seen IE get totally crazy during development work with CSS.

It's like it cashes the CSS and refuses to update it unless you shut it down and restart it (in extreeme cases a reboot is needed).

However i have never seen Mozilla do strange stuff like that.

This combined with that Moz is supperior in correct HTML and CSS support is te main reason I design all pages using mainly Moz and in the end use CSS parsing bugs to work around IE bugs.

Easiest way to remain sane ?

In any case, try this again and you will see it does what you want ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

</head>

<body>

<div style="margin:0 0 20px 67%; text-align:center; border:1px solid #C00000; background:#CFD0E7;">

<img src='citizenship.gif' height=150 width=150 alt='Citizenship logo'>

</div>

</body>

</html>

@Zach_ElfersDec 04.2002 — #CSS isn't complicated at all once you learn it.? It just takes time. Be patient.

@Robert_WellockDec 09.2002 — #The main issue is not whether CSS is easy or not, which on the whole it's not that hard...

The main concern is what proportion of user-agents are correctly rendering the CSS as recommended by the W3C, plus the actual percentage of users that are using these compliant browsers.

Since Micro$oft is nearly monopoly in browser share there are going to be major issues with CSS since its CSS implementation is not what I would call "acceptable" for a mainstream version six browser.

Also in #CSS _↴

Problems with using divs for layout CSS Nightmare![RESOLVED] Opacity Firefox

Success!

Help @jpmoriarty spread the word by sharing this article on Twitter...

Tweet This

simple problem – centering an image

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

simple problem – centering an image

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴