Viewing Thread:
"CSS help"

Okay I'm having a CSS problem with my site, I have a bar with links in "block", at the moment the blocks are aligned on the left. How do I go about centering them in the middle?

Thanks in advanced :)


#block {
float:left;
clear:both;
background-color: #DEDECE;
width: 768px;
height:26px;
border-left: #A5A5A5 solid 1px;
border-right: #A5A5A5 solid 1px;
border-bottom: #A5A5A5 solid 1px;
}

#block a {
text-align: center;
width: 90px;
text-decoration: none;
line-height: 26px;
display: block;
float: left;
}

#block a:hover {
text-decoration: underline;
}

#block span {
float: left;
line-height: 25px;
}

____________________

<div id="block">
<a href="test.html" class="pagelink">Page1</a><span>|</span>
<a href="test.html" class="pagelink">Page2</a><span>|</span>
<a href="test.html" class="pagelink">Page3</a><span>|</span>
<a href="test.html" class="pagelink">Page4</a>
</div>



Is the page in t'internet? Care to link to it if it is so we can see what's going on...?

I'm just not entirely sure what part you want centered, might be clearer just to see the page.

if anyone can help or need anymore information I'll do it, as I really need to fix this problem.

I couldnt get it to work :(

oh dear.

I'm not familiar with the id thing you're using, but could you use a text-align=center property?

Jo

Okay I'm having a CSS problem with my site, I have a bar with links in "block", at the moment the blocks are aligned on the left. How do I go about centering them in the middle?

Thanks in advanced :)


#block {
float:left;
clear:both;
background-color: #DEDECE;
width: 768px;
height:26px;
border-left: #A5A5A5 solid 1px;
border-right: #A5A5A5 solid 1px;
border-bottom: #A5A5A5 solid 1px;
}

#block a {
text-align: center;
width: 90px;
text-decoration: none;
line-height: 26px;
display: block;
float: left;
}

#block a:hover {
text-decoration: underline;
}

#block span {
float: left;
line-height: 25px;
}

____________________

<div id="block">
<a href="test.html" class="pagelink">Page1</a><span>|</span>
<a href="test.html" class="pagelink">Page2</a><span>|</span>
<a href="test.html" class="pagelink">Page3</a><span>|</span>
<a href="test.html" class="pagelink">Page4</a>
</div>