Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 5, 2016 at 8:42 am #608118
    andreki

    Hello!

    So I customized the size of the XL button, made it larger. What I couldn’t manage to do however was to get the text to be aligned in the center of the button. How can I vertically align the text within a button to the center?

    Thank you!

    April 5, 2016 at 9:11 am #608130
    Vinay

    Hey André!

    You can add the below css to the button class

    .custom-button{
     top:50%;
     transform:translateY(-50%);
}

    If you have any issues please share the custom css you are using and the link to the page where we can inspect the custom button.

    Cheers!
    Vinay

    April 5, 2016 at 12:15 pm #608216
    andreki

    It didn’t work. Do I have to put the code into the custom css form within the avia button builder?

    April 6, 2016 at 9:57 am #608775
    Vinay

    Hi!

    Please try the below css

    NOTE: This will affect all the buttons if you like to target only one button please enable custom CSS class name support
    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and target only the buttons you like using custom CSS clasa name.

    .avia_iconbox_title {
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);	
}

    Best regards,
    Vinay

    • This reply was modified 8 years, 7 months ago by Vinay.
    April 7, 2016 at 8:40 pm #609859
    andreki

    Thank you so much, Vinnie! That worked just fine! :)

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Vertical align of text within button’ is closed to new replies.