Page 1 of 1

Button [SOLVED]

Posted: Thu Apr 05, 2012 4:04 pm
by YoussefSiblini
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

Re: Button

Posted: Thu Apr 05, 2012 4:38 pm
by Christopher
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
}

Re: Button

Posted: Thu Apr 05, 2012 4:58 pm
by YoussefSiblini
Thank you,
This worked perfect :)