HTML, CSS and anything else that deals with client side capabilities.
Moderator: General Moderators
YoussefSiblini
Forum Contributor
Posts: 206 Joined: Thu Jul 21, 2011 1:51 pm
Post
by YoussefSiblini » Thu Apr 05, 2012 4:04 pm
Hi Guys,
I have a button and I gave it a width and height, the button has a full Bg image, and I want to align the text inside it in the middle Vertical and Horizontal, is their a way to play around that as vertical-align:middle; does not work?
HTML
Code: Select all
<a href="#" class="Light_Link">Details</a>
CSS
Code: Select all
.Light_Link { width:100px; text-align:center; height:36px; vertical-align:middle; background:url("../../images/Light_Link_bg.png") no-repeat scroll 0 0 transparent; display:block;}
Youssef
Last edited by
YoussefSiblini on Thu Apr 05, 2012 4:58 pm, edited 1 time in total.
Christopher
Site Administrator
Posts: 13596 Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US
Post
by Christopher » Thu Apr 05, 2012 4:38 pm
There are several ways to do thiss. A simple way would be to put a div around the text:
Code: Select all
<a href="#" class="Light_Link"><div class="Light_Link_Text">Details</div></a>
Code: Select all
.Light_Link { width:100px; height:36px; background:url("../../images/Light_Link_bg.png") no-repeat scroll 0 0 transparent; display:block;}
.Light_Link_Text {
margin: 12px 0px 0px 0px; // or whatever is needed
padding: 0;
text-align:center;
}
Or wrap the link with the div:
Code: Select all
<div class="Light_Link"><a href="#" class="Light_Link_Text">Details</a></div>
Code: Select all
.Light_Link { text-align:center; width:100px; height:36px; background:url("../../images/Light_Link_bg.png") no-repeat scroll 0 0 transparent; }
.Light_Link_Text {
margin-top: 12px; // or whatever is needed
}
(#10850)