• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.3 Button text alignment

AUSL

New member
#1
The text on some of my buttons is aligned to the top of some buttons. (See images below.)

Here is the extra CSS that I have added for my "Buttons" and "Primary Button" in the Buttons Style Properties:

Code:
text-align: center;
text-transform:uppercase;
font-weight: 700;
line-height: 21px;
display: inline-block;
cursor: pointer;
border: 0;
Any idea how I can fix this?

wonky_button.png wonky_button2.png wonky_button3.png
 

Russ

Well-known member
#2
Buttons are picky throughout XF, don't use any padding on the default button and stick to height/line-heights.

By default XF has a border on the top and bottom so the height is 23px, while the line-height is 2px(1px for the top/bottom border).

If you want to increase your button height, increase the height/line-height, don't use padding on the top/bottom