Help Centering Text!

T

TheLivingDead

New Member
Hello!
I am having TROUBLE trying to center my text within the sprite buttons I've created! and also, having trouble creating 2 buttons per row...

heres the live link http://nicwhite989.com/button.html#

and heres my code thus far:

#demo {
width: 280px; margin: 0px auto;
text-align:center;
margin:auto;
display:table;
}

#demo p a.press-it-btn {
display: block; /* Change anchor to block element */
width: 140px; height: 140px; /* Specify width and height of the image. Height is value of each individual button graphic */
background-image: url(images/secNavBut.jpg); /* Add the image as a background */
background-position: bottom; /* Set the position to the top */
color:white; text-transform:capitalize;
font-weight:900; font-size:150%;
text-outline: 2px 2px #ff0000;
text-shadow: black 0.1em 0.1em 0.2em;


}
#demo p a.press-it-btn:hover, #demo p a.press-it-btn:focus {
background-position: center; /* Set the position to the center */
}
#demo p a.press-it-btn:active {
background-position: top; /* Set the position to the bottom */
}
#demo p a.press-it-btn:link {
15pt; color: #000066; text-decoration: none;

}

a { outline: none; }
</style>
</head>

<body>

<div id="demo">
<div>
<p><a href="#" class="press-it-btn">Press it</a></p>
<p><a href="#" class="press-it-btn">Press it</a></p>
</div>
</div>

</html>

any help will be appreciated!
 
T

TheLivingDead

New Member
EUREKA!!! I've got the text centered Now!!!!
i used:

display: table-cell; vertical-align: middle; text-align: center;

Now, I just need to monkey around and get the buttons to display as 2 per row.... any ideas?
 
PixelPusher

PixelPusher

Super Moderator
Staff member
The "table-cell" value for the css "display" property is not reliable across all browsers. If you are simply trying to vertically align a single line of text, use
Code: 
line-height: value (px, em, %)

If you are trying to align a block of text (block-level element), use margins or padding.
 
You must log in or register to reply here.
Top