PDA

View Full Version : Aligning text on a horizontal bar centrally


Abbica
08-16-2010, 02:58 PM
Hi, I have a horizontal solid block menu for my buttons on the top of my web page which I am trying to align up using the CSS. Some of my button headings are longer than others so it is going down into a double line e.g. Serviced Offices is going to double line whereas Contact Us is one line, but the problem is that the Contact Us aligns up at the top of the button, whereas I want it to align to the middle, center of the button. Here is some of my CSS, I cannot figure out how I would go about doing this or creating a new Css style, what option on my properties panel would I choose for that please?
}
.solidblockmenu{
width: 750px;
background-color: #800000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
border-top-width: 1px;
border-right-width: 0;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
position: relative;
height: 38px;
padding: 0px;
text-align: center;
top: 0px;
vertical-align: sub;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
color: white;
text-decoration: none;
float: left;
width: 92px;
position: static;
text-align: center;
vertical-align: middle;
padding-top: 5px;
padding-right: 16px;
padding-left: 17px;
padding-bottom: 10px;
height: 18px;
top: 13px;
}

gentleone
08-17-2010, 08:58 AM
We need to see also the HTML or even better the page online if you have so.

Abbica
08-17-2010, 11:48 AM
Hi, I have decided to use spry horizontal instead, i can't put the page up online. Thanks anyway