Using Css To Center Images

**i_like_php** · Aug 18, 2004 04:07

ok i am completely stumped, everysince i went to the xhtml standards for my entire site, i've been having problems trying to keep it standards compliance, while at the same time i can't get my images to all be centered.

if i try to add the center tag xhtml strict says it's not allowed and i am trying to use css to resolve the problem but i don't have the slightest clue on how to do so, so how do i go about centering a group images so they'll be in the center of the page instead of them all on the left side of the page.

heres a copy of my css file to see if you guys can help out.

HTML Code:

 body {
 background-color: #22437f;
 color: #000;
 font-size: 0.9em;
 font-family: sans-serif,helvetica;
 margin: 0;
 padding: 0;
}
{
 img align: center;
}
td {
font-family : arial, helvetica, sans-serif; 
font-size : 8px; 
color : #000000; 
} 
.text {
color : #000000; 
font-family : arial, helvetica, sans-serif; 
font-size : 8px; 
text-decoration : none; 
} 
.textlight {
color : #000000; 
font-family : arial, helvetica, sans-serif; 
font-size : 8px; 
text-decoration : none; 
} 
.header {
font-family : arial, helvetica, sans-serif; 
font-size : 8px; 
font-weight : bold; 
color : #333333; 
} 
.header2 {
font-family : arial, helvetica, sans-serif; 
font-size : 8px; 
font-weight : bold; 
color : #000000; 
} 
.header3 {
font-family : arial, helvetica, sans-serif; 
font-size : 8px; 
color : #000000; 
} 
a:link {
color : #666666; 
font-family : arial, helvetica, sans-serif; 
font-weight : bold; 
font-size : 10px; 
text-decoration : none; 
} 
a:visited {
color : #666666; 
font-family : arial, helvetica, sans-serif; 
font-weight : bold; 
font-size : 10px; 
text-decoration : none; 
} 
a:active {
color : #ffff00; 
font-family : arial, helvetica, sans-serif; 
font-weight : bold; 
font-size : 10px; 
text-decoration : none; 
} 
a:hover {
text-decoration : none; 
font-family : arial, helvetica, sans-serif; 
font-weight : bold; 
font-size : 10px; 
color : #6495ed; 
}

help me please

**Buddy Bradley** · Aug 18, 2004 06:10

Can you explain in a bit more detail what you're trying to do - e.g. is this for a photo gallery style page, or a single image within some text, or what?

If it is just a collection of images, you can center the whole lot by enclosing them in a DIV and centering that:

Code:

/* CSS */

body {
text-align: center;
}

#gallery {
margin: 0 auto;
width: 500px;
}

<!-- HTML -->

<div id="gallery">
<img src="1.gif" />
<img src="2.gif" />
<img src="3.gif" />
<img src="4.gif" />
</div>

Obviously you'd want to apply some CSS to the images to get them to line up and look good too.

**Buddy Bradley** · Aug 18, 2004 06:11

Oh, and this:

Code:

{
 img align: center;
}

Makes absolutely no sense at all.

**i_like_php** · Aug 18, 2004 06:27

Originally Posted by Buddy Bradley

Oh, and this:

Code:

{
img align: center;
}

Makes absolutely no sense at all.

as i recall i said i don't know how to make my images be in the center of the page so there.

anyways perhaps the code will help you out a bit more as to what i am trying to accomplish!

HTML Code:

  <table width="950" cellpadding="0" cellspacing="0" summary="">
   <tr>
	<td colspan="2">
	 <img src="images/mustang_01.jpg" width="418" height="51" alt="" /> 
	</td>
	<td colspan="2">
	 <img src="images/mustang_02.jpg" width="532" height="51" alt="" /> 
	</td>
	<td>
	 <img src="images/spacer.gif" width="1" height="51" alt="" /> 
	</td>
   </tr>
   <tr>
	<td>
	 <img src="images/mustang_03.jpg" width="247" height="147" alt="" /></td>
	<td colspan="2" rowspan="2">
	 <img src="images/mustang_04.jpg" width="418" height="202" alt="" /></td>
	<td rowspan="3">
	 <img src="images/mustang_05.jpg" width="285" height="271" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="1" height="147" alt="" /></td>
   </tr>
   <tr>
	<td>
	 <img src="images/mustang_06.jpg" width="247" height="55" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="1" height="55" alt="" /></td>
   </tr>
   <tr>
	<td colspan="2" rowspan="2">
	 <img src="images/mustang_07.jpg" width="418" height="219" alt="" /></td>
	<td rowspan="2">
	 <img src="images/mustang_08.jpg" width="247" height="219" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="1" height="69" alt="" /></td>
   </tr>
   <tr>
	<td rowspan="2">
	 <img src="images/mustang_09.jpg" width="285" height="208" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="1" height="150" alt="" /></td>
   </tr>
   <tr>
	<td colspan="2">
	 <img src="images/mustang_10.jpg" width="418" height="58" alt="" /></td>
	<td>
	 <a href="coming-soon/"><img src="images/mustang_11.jpg" width="247" height="58" style="border:0;" alt="click here" /></a></td>
	<td>
	 <img src="images/spacer.gif" width="1" height="58" alt="" /></td>
   </tr>
   <tr>
	<td>
	 <img src="images/spacer.gif" width="247" height="1" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="171" height="1" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="247" height="1" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="285" height="1" alt="" /></td>
	<td>
	</td>
   </tr>
  </table>

i want to be able to put this in the center of the page now do you get what i am trying to say.

**i_like_php** · Aug 18, 2004 06:28

now how do i go about using css to center all of that?

**i_like_php** · Aug 18, 2004 06:52

nevermind i finally figured it out thanks for your help anyways it was greatly apprieciated

.

**Buddy Bradley** · Aug 18, 2004 07:20

You ditch all that table cr*p and layout your site using CSS...

**i_like_php** · Aug 18, 2004 19:33

Originally Posted by Buddy Bradley

You ditch all that table cr*p and layout your site using CSS...

i am lost what do you mean.

**gengar56** · Aug 18, 2004 20:43

you use CSS for the site layout and drop tables altogether.

**i_like_php** · Aug 19, 2004 10:52

Originally Posted by gengar56

you use CSS for the site layout and drop tables altogether.

is there a tutorial or something that can help me do this or would be kind enough to show me an example on how to do this, with the code already provided, so i can learn it and drop the use of tables if this will help on the alignment woes.

thanks

**Paul O'B** · Aug 19, 2004 13:19

Hi,

now how do i go about using css to center all of that?

If you mean centre the table then simply give your table an id and then use margin-left:auto and margin-right:auto to centre the whole table.

You need to add text-align:center on a parent to centre it for ie5 and 5.5..

Code:

body {
 background-color: #22437f;
 color: #000;
 font-size: 0.9em;
 font-family: sans-serif,helvetica;
 margin: 0;
 padding: 0;
text-align:center;/* center for ie5/5.5.*/
}
table#main{
 width:950px;
 margin-left:auto;/* centre for good browsers*/
 margin-right:auto;/* centre for good browsers*/
 text-align:left;
}

Code:

<table id="main"  cellpadding="0" cellspacing="0" summary="">

The faq sticky thread has a few pointers on how to centre things which you might find useful.

is there a tutorial or something that can help me do this or would be kind enough to show me an example on how to do this, with the code already provided, so i can learn it and drop the use of tables if this will help on the alignment woes.

We'd need to know how the table was to behave and what other content was going in it.

If the table is just a holder for all those images then you could simply absolutely place the images where you want them.

As I can't see the images I've no idea what your page is about or what you are trying to do with that patchwork of images. Do they go together some way to produce a picture? Or are they just separate images pushed up together?

If you had a link to the live page then we could give you some pointers on how to convert it. At the moment all I could give you is a load of co-ordinates for abolutely placed elements

.

Paul

**i_like_php** · Aug 19, 2004 15:33

heres the code to the entire page, since the site isn't live as of yet but here it is....

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> 
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" 
	  type="text/css" 
	  href="/includes/transitional.css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>
   testing xhtml standards
  </title>
</head>
<body> 
<div class="center">
  <table width="950" cellpadding="0" cellspacing="0" summary="">
   <tr>
	<td colspan="2">
	 <img src="images/corvette_01.jpg" width="418" height="51" alt="" /> 
	</td>
	<td colspan="2">
	 <img src="images/corvette_02.jpg" width="532" height="51" alt="" /> 
	</td>
	<td>
	 <img src="images/spacer.gif" width="1" height="51" alt="" /> 
	</td>
   </tr>
   <tr>
	<td>
	 <img src="images/corvette_03.jpg" width="247" height="147" alt="" /></td>
	<td colspan="2" rowspan="2">
	 <img src="images/corvette_04.jpg" width="418" height="202" alt="" /></td>
	<td rowspan="3">
	 <img src="images/corvette_05.jpg" width="285" height="271" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="1" height="147" alt="" /></td>
   </tr>
   <tr>
	<td>
	 <img src="images/corvette_06.jpg" width="247" height="55" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="1" height="55" alt="" /></td>
   </tr>
   <tr>
	<td colspan="2" rowspan="2">
	 <img src="images/corvette_07.jpg" width="418" height="219" alt="" /></td>
	<td rowspan="2">
	 <img src="images/corvette_08.jpg" width="247" height="219" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="1" height="69" alt="" /></td>
   </tr>
   <tr>
	<td rowspan="2">
	 <img src="images/corvette_09.jpg" width="285" height="208" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="1" height="150" alt="" /></td>
   </tr>
   <tr>
	<td colspan="2">
	 <img src="images/corvette_10.jpg" width="418" height="58" alt="" /></td>
	<td>
	 <a href="coming-soon/"><img src="images/corvette_11.jpg" width="247" height="58" style="border:0;" alt="click here" /></a></td>
	<td>
	 <img src="images/spacer.gif" width="1" height="58" alt="" /></td>
   </tr>
   <tr>
	<td>
	 <img src="images/spacer.gif" width="247" height="1" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="171" height="1" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="247" height="1" alt="" /></td>
	<td>
	 <img src="images/spacer.gif" width="285" height="1" alt="" /></td>
	<td>
	</td>
   </tr>
  </table>
</div>
 <center> 
  <a href="photos.php">my photos</a>
  <a href="main.php">main page</a> 
  <a href="phpbb2/">forum</a> <a href="carvideos.php">car vids</a> 
  <a href="author">authors page</a> <a href="version.php">version history</a>
<br />
  <font face="century gothic" size="1" color="#000000"> 
&copy; 1996-2004 corvette.com All rights reserved.&nbsp;
  <a href="privacy-policy/">[privacy policy]</a></font>
 </center>
<p>
	  <a href="[url="http://validator.w3.org/check?uri=referer"]http://validator.w3.org/check?uri=referer"><img[/url]
		  src="/images/xhtml.gif"
		  alt="Valid XHTML 1.0!" border="0" /></a>
</p>
 </body> 
</html>

thanks for the other tips provided and i will have a look at the thread in question. since i can't explain how the table is used maybe the provided source code will be able to help you understand what i am talking about.

User Tag List

Thread: Using Css To Center Images

Thread Tools

Display

Using Css To Center Images

Bookmarks

Bookmarks

Posting Permissions