Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 18, 2015 at 10:12 pm #398492
    svenwalther

    I’d like to have all of my buttons be the same height, with the text (sometimes 1 line, sometimes 2) centred vertically. I’ve tried 

    .avia-button {
    min-height: 120px !important;
}

    but that isn’t giving the result I’m looking for (all text aligned at the top across the buttons, rather than centred in the button).

    I’ve also tried 

    .avia_iconbox_title {
     position: relative; 
     top: 50%; 
     transform: translateY(-50%);
}

    without any luck.

    Suggestions?

    • This topic was modified 9 years, 10 months ago by svenwalther. Reason: Make it easier to read
    February 19, 2015 at 6:10 am #398652
    Josue

    Hey!

    The first code is meant to affect a button and the second one an iconbox title, i’m not following you. Can you please post a screenshot/mockup of what would you want to achieve? a link to your website will be helpful too.

    Best regards,
    Josue

    February 19, 2015 at 4:45 pm #399009
    svenwalther

    I’m trying to get the buttons to all have the same height, and have the text centred vertically in the button. How can I add screenshots? I’m not able to share a link as the site is an intranet behind a security firewall.

    February 19, 2015 at 8:49 pm #399239
    Josue

    Upload the image to Dropbox or Imgur, then post the link here.

    Regards,
    Josue

    February 19, 2015 at 9:11 pm #399248
    svenwalther

    Right now buttons look like this (text length determines button height):
    https://www.dropbox.com/s/hnf8nhzeienmjhb/buttons_1.jpg?dl=0

    But I’d like them to all be the same height (looks much more consistent), like this:
    https://www.dropbox.com/s/6b21e209dk2pzgu/buttons_2.jpg?dl=0

    February 19, 2015 at 11:34 pm #399320
    Josue

    Hey!

    1. Add this line to theme / child theme functions.php:

    add_theme_support('avia_template_builder_custom_css');

    2. Set the class of “one-line” to the one line buttons.
    3. Add this to Quick CSS:

    .one-line .avia-button{
    line-height: 30px;
}

    Cheers!
    Josue

    February 20, 2015 at 3:50 pm #399710
    svenwalther

    Thanks, Josue. Had to play around with the line-height to get it just right, but this did the trick! Thanks!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Same button height with text v-align center’ is closed to new replies.