I am not a web developer so hopefully i can explain this the right way. Let’s say i have a div that will have several links centered within it. The links visually look like “buttons” that are CSS boxes with a small background image 120x50 px. No matter where i enter align=“centered” whether in the div, the body, etc, the blocks always always always move to the far left! Here is the code:
HTML:
<div id="centercontent" align="center">
<div id="maincontentcentered" align="center"><a href="#">link4</a> <a href="#">link5</a> <a href="#">link6link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></div>
</div>
CSS:
#centercontent {
text-align: center;
margin-right: auto;
margin-left: auto;
}
#maincontentcentered {
width: 500px;
float: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
#maincontentcentered a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
background-image: url(../images/buttonbg2.gif);
background-repeat: no-repeat;
background-position: left top;
float: left;
height: 50px;
width: 120px;
display: block;
line-height: 15px;
margin: 2px;
text-align: center;
color: #002D62;
}
#maincontentcentered a:hover {
background-image: url(../images/MainFrameButtons/m2.gif);
background-repeat: no-repeat;
background-position: left bottom;
text-decoration: underline;
}