Centering Images with and without border

Forum Moderators: not2easy

Message Too Old, No Replies

Centering Images with and without border

rogue3

7:45 pm on Dec 5, 2010 (gmt 0)

I'm having a devil of a time trying to make a few CSS rules. Here's what I want to do:

1. Center an image that has no border
2. Center an image with a border

The images may or may not have links, so I want the blue border NOT to appear. I tried creating a <p> tag to apply to the image, but then I get no borders on the image yet I can get it to center. And, of course, I get the dreaded blue border.

Here are the problems:

Seems that no matter what I try I can't get the combined results. If my image has a link, I get the blue border. If I use the 'auto' left and right then the link spans the entire width of the 'auto' area.

Is this even possible? I'm trying to avoid old tags, but man how simple was it when I could just slap a center tag around an image :-(

birdbrain

12:19 am on Dec 6, 2010 (gmt 0)

Hi there rogue3,

the following example shows two methods of image centering...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<base href="http://www.coothead.co.uk/images/"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>centered images</title> 
 
<style type="text/css"> 
#container-one{ 
  width:778px; 
  padding:10px; 
  border:1px solid #999; 
  margin:10px auto; 
  text-align:center; /* this will center inline elements */ 
 } 
#image-one img { 
  width:100px; 
  height:100px; 
  border:0; 
 } 
 
 
#container-two { 
  width:778px; 
  padding:10px; 
  border:1px solid #333; 
  margin:auto; 
 } 
#image-two { 
  display:block; 
  width:100px; 
  margin:auto;   /* this will center block elements */ 
 } 
#image-two img { 
  width:100px; 
  height:100px; 
  border:0; 
 } 
</style> 
 
</head> 
<body> 
 
<div id="container-one"> 
 <a id="image-one" href="#"><img src="anim.gif" alt=""></a> 
</div> 
 
<div id="container-two"> 
 <a id="image-two" href="#"><img src="anim.gif" alt=""></a> 
</div> 
 
</body> 
</html>

birdbrain

rogue3

10:31 pm on Dec 6, 2010 (gmt 0)

Thanks for the tips. I actually came back here to post the solution I found (very similar to yours). Naturally, I fiddled with it for hours, posted here, then figured it out 20 minutes after that. I didn't get my email notification that you had responded. Anyway, here is what I did so that I need only apply to the <p> tag that has the image in it:


.p-centerNoBorder {
display: block;
text-align: center;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border: 0px none #000;
}

.p-centerNoBorder img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.p-centerBorder {
display: block;
text-align: center;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
.p-centerBorder img {
border: 1px solid #000;
}
}