Forum Moderators: not2easy
Please, can anybody help me guiding how to replace a HTML <center> tag with CSS?
I've already acomplished part of this task following the guides from a post on this forum: [webmasterworld.com...] . This solution worked perfectly for a single image, but I couldn't find a solution for a group of images.
Please, take a look at the following image: [<snip>
The block marked as "A" was done using the solution mentioned before, but I'm still looking for a solution for the block marked as "B".
The "B" block is currently being done using the following HTML code.
<center>
<a href = "link1"><img style="margin:2px;" src="img1.png" width="80" height="50" /></a>
<a href = "link2"><img style="margin:2px;" src="img2.png" width="80" height="50" /></a>
<a href = "link3"><img style="margin:2px;" src="img3.png" width="80" height="50" /></a>
<a href = "link4"><img style="margin:2px;" src="img4.png" width="80" height="50" /></a>
<a href = "link5"><img style="margin:2px;" src="img5.png" width="80" height="50" /></a>
<a href = "link6"><img style="margin:2px;" src="img6.png" width="80" height="50" /></a>
<a href = "link7"><img style="margin:2px;" src="img7.png" width="80" height="50" /></a>
<a href = "link8"><img style="margin:2px;" src="img8.png" width="80" height="50" /></a>
<a href = "link9"><img style="margin:2px;" src="img9.png" width="80" height="50" /></a>
</center>
But I would like to remove the <center> tag that is deprecated. Any help is very welcomed.
I don't know if it is relevant but the images are inside a <div> tag used for layouting pourposes.
Thanks a lot for all your time and attention.
[edited by: swa66 at 11:25 am (utc) on Oct. 13, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
2) The personal link is going to get chopped, so won't reference that. Probably don't need it as the explanation of what you want seems fairly clear. You want to center the entire group of images.
3) {text-align: center;} is the correct CSS.
4) <img> is/are inline elements. Declare {text-align: center;} on the wrapper. This will center all of the images.
5) With style identical for of the images, you can dump all the inline declarations and put it one embedded declaration:
.img-links img {
width: 80px; height: 50px; margin: 2px;
}
Play with this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.img-links {
text-align: center;
}
.img-links img {
width: 80px; height: 50px; margin: 2px;
}
</style>
</head>
<body>
<div class="img-links">
<a href="link1"><img src="aaa.jpg" alt="" /></a>
<a href="link2"><img src="aaa.jpg" alt="" /></a>
<a href="link3"><img src="aaa.jpg" alt="" /></a>
<a href="link4"><img src="aaa.jpg" alt="" /></a>
<a href="link5"><img src="aaa.jpg" alt="" /></a>
<a href="link6"><img src="aaa.jpg" alt="" /></a>
<a href="link7"><img src="aaa.jpg" alt="" /></a>
<a href="link8"><img src="aaa.jpg" alt="" /></a>
<a href="link9"><img src="aaa.jpg" alt="" /></a>
</div>
<!--##########
Please, can anybody help me guiding how to replace a HTML <center> tag with CSS?I've already acomplished part of this task following the guides from a post on this forum:
[webmasterworld.com...] . This solution worked perfectly for a single image, but I couldn't find a solution for a group of images.
Please, take a look at the following image:
<chopped link />The block marked as "A" was done using the solution mentioned before, but I'm still looking for a solution for the block marked as "B".
The "B" block is currently being done using the following HTML code.
..................................................
But I would like to remove the <center> tag that is deprecated. Any help is very welcomed.I don't know if it is relevant but the images are inside a <div> tag used for layouting pourposes.
-->
</body>
</html>
Second, sorry for my late reply but I had an unexpected trip at my job and I had no time to reply. Just today I'm returning to my normal life.
Third, sorry for the image link, I didn't realise at the time I've posted that the image would expire and be useless in a short time.
Well, I've tried what you suggested and everything worked very fine. I've replaced all my <center> tags and everything is OK now.
Again, thank you for your all your help (and for your time answering my question) and sorry for my mistakes.
Cheers,
Rodrigo.
.....returning to my normal life.
I've joked with former employers that if I didn't have to do my job, I could get a lot more work done. LOL Not everybody had a good attitude about it, because sometimes it was a joke with way too much truth behind it.
I help you here hoping you'll remember and help me or somebody else down the line.
