Newbie needs help centering

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

pleasegoawayforever@hotmail.com - 31 May 2005 13:19 GMT

I have a pretty simple task but I'm not sure how to do it with CSS.

I want to have 2 images side by side and centered across the
entire width. I don't want to use tables, because this is really
not tabular data. I can get a paragraph of text to center okay,
but I don't know how to center 2 images on their own....and for them
to look centered in all browsers.

Is there a way that I can do this or do I "have" to use tables ?

Thanks !

Joe

Reply to this Message

Spartanicus - 31 May 2005 13:41 GMT

>I want to have 2 images side by side and centered across the
>entire width.

http://www.w3.org/TR/CSS21/text.html#alignment-prop

Signature

Spartanicus

Reply to this Message

pleasegoawayforever@hotmail.com - 31 May 2005 14:42 GMT

>>I want to have 2 images side by side and centered across the
>>entire width.
>
>http://www.w3.org/TR/CSS21/text.html#alignment-prop

Thank you. I see how that will center everything in the div.
However, how do I get a space between two images? Do
I have to include blank gif or use vspace ? I don't want the
photos butting up against each other but I believe either of
those approaches would not scale well. Do you know what
I mean?

I know that I could use a 2-column table and just center
an image in each cell, but I try not to use them when they
really shouldn't be used. That's why I'm trying to get more
familiar with how to do things with CSS. Do you agree that
this is the approach that I should take?

Thanks again !

Joe

Reply to this Message

Gus Richter - 31 May 2005 15:49 GMT

> Thank you. I see how that will center everything in the div.
> However, how do I get a space between two images? Do
> I have to include blank gif or use vspace ? I don't want the
> photos butting up against each other but I believe either of
> those approaches would not scale well. Do you know what
> I mean?

If you have both image elements coded on the same line, they will abut.
Code each image element on separate lines or place   between them.

Signature

Gus

Reply to this Message

Spartanicus - 31 May 2005 17:09 GMT

>>http://www.w3.org/TR/CSS21/text.html#alignment-prop
>
>Thank you. I see how that will center everything in the div.
>However, how do I get a space between two images?

Evenly distributing 2 images across the available window width requires
css methods that beginners will find difficult to use, so I suggest you
alter your design.

http://homepage.ntlworld.com/spartanicus/joe.htm

Signature

Spartanicus

Reply to this Message

David Dorward - 31 May 2005 14:20 GMT

> I want to have 2 images side by side and centered across the
> entire width

http://dorward.me.uk/www/centre/#inline

Signature

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Reply to this Message

pleasegoawayforever@hotmail.com - 31 May 2005 15:26 GMT

>> I want to have 2 images side by side and centered across the
>> entire width
>
>http://dorward.me.uk/www/centre/#inline

Okay...that seems to make sense, but I must be doing something
wrong. The images, while centered, are still butted up against
each other. What I want is to have them spread across the entire
width. Here's what I did:

<style type="text/css">
p.c1 {text-align: center}
</style>

<p class="c1"><img src="image1.jpg" width="105" height="220">
<img src="image2.jpg" width="105" height="161" /></p>

I'm stumped....can you see what I've done wrong ?

Also, once I resolve that issue, I would like to have the taller one
centered vertically against the shorter one too. How would I do that
?

Thanks again !

Joe

Reply to this Message

David Dorward - 31 May 2005 16:15 GMT

>>http://dorward.me.uk/www/centre/#inline

> Okay...that seems to make sense, but I must be doing something
> wrong. The images, while centered, are still butted up against
> each other. What I want is to have them spread across the entire
> width.

How so? The images scaled so between them they take up the entire width of
the paragraph? One image aligned left and the other aligned right? Neither
of those would actually be centred.

> <style type="text/css">
> p.c1 {text-align: center}
> </style>

"c1"? That's a pretty meaningless class name. You should probably reconsider
it so that when you come back to edit it (however many months down the line
it is) you know what the purpose of the class is.

> <p class="c1"><img src="image1.jpg" width="105" height="220">
> <img src="image2.jpg" width="105" height="161" /></p>

Neither image has the non-optional alt attribute, one using HTML style
syntax while the other uses XHTML style syntax, and I don't think that the
content of the paragraph actually is a paragraph - so it should probably be
a <div> rather than a <p>.

> Also, once I resolve that issue, I would like to have the taller one
> centered vertically against the shorter one too. How would I do that
> ?

http://www.w3.org/TR/CSS21/visudet.html#line-height

Signature

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Reply to this Message

Stan McCann - 31 May 2005 20:39 GMT

>>> I want to have 2 images side by side and centered across the
>>> entire width
[quoted text clipped - 22 lines]
>
> Joe

http://www.w3schools.com/css/css_reference.asp#padding can help you do
both. I rarely recommend setting padding to a pixel size but when
using it with images, it is sometimes appropriate. To center your
taller picture vertically, set the top padding accordingly. You can
set left and right on your img elements to leave a bit of space between
while still centering the two together.

Signature

Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
http://alamo.nmsu.edu/ There are 10 kinds of people.
Those that understand binary and those that don't.

Reply to this Message

pleasegoawayforever@hotmail.com - 31 May 2005 17:07 GMT

I think I have it now !! I found an example online and this seems to
be just what I needed !!

<style type="text/css">

#newMethod div {
    width:550px; height:200px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
#newMethod img {
    vertical-align:middle;
}
* html #newMethod div {
    float:left; /* if not table-cells, you must float them to get
them side by side */
}

/* inessential */

#newMethod {
    height:215px;
}
</style>

<div id="newMethod">
    <div>
    <img src="image1.jpg" alt="" width="200" height="220" /></div>
    <div><a href="#">
    <img src="image2.jpg" alt="" width="200" height="161"
/></div>
</div>

While I'm testing this, the names I'm using are just for testing
purposes....I _wil_ assign something useful, once I'm happy.
Likewise, my previous example did not include some mandatory
parameters....I was just conserving space.

I might have to play with the width a bit, but I think this is a
pretty good start.

Thanks for all of your help !

Joe

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2005

Newbie needs help centering