Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #357868

    Rippedbodyjp
    Participant

    Hi, I’m having trouble vertically centering “buy now” buttons in two places, and vertically centering text within buttons in three places, all on this page. Can you please explain to me how to do this?

    Thank you so much.

    url: http://rippedbody.jp/adjustments-manual/

    #357916

    Rad
    Moderator

    Hi there,

    Thanks for writing in.

    How about wrapping your buttons with other elements required for alignment.

    Example, you can use this tool

    http://howtocenterincss.com/#contentType=div&horizontal=center&vertical=middle&browser.IE=9

    Just choose Unkown value if you’re not sure about width and height.

    The example code will be,

    <div style="display:table;">
      <div style="display:table-cell;vertical-align:middle;">
        <div style="margin-left:auto;margin-right:auto;">[x_button href=""]Hi[/x_button]</div>
      </div>
    </div>

    Though, it’s best to specify the height, that should be the height of your row where you wish to vertical align your button.

    Thanks!

    #357975

    Rippedbodyjp
    Participant

    Thank you for the fast reply.

    Can you tell me where I paste this code to center the button and text?
    How do I find out the row height?

    Sorry for the amateurish questions.

    Andy

    #357996

    Paul R
    Moderator

    Hi Andy,

    Sorry for the confusion.

    You can replace your button element with a text element then add the code given above into your text element.

    Hope that helps.

    #358116

    Rippedbodyjp
    Participant

    I think I’ve screwed something up. Can you take a look?

    I duplicated the top section, added the text element and then pasted the button stuff in between, but it doesn’t look right.

    [vc_row inner_container=”true” padding_top=”20px” padding_bottom=”20px” bg_color=”#222222″][vc_column width=”2/3″][text_output]
    <h2 style=”text-align: center;”><span style=”color: #ffffff;”>The Diet Coaching & Adjustments Manual</span></h2>
    <p style=”font-size: 1.5em; text-align: center; color: #a4a4a4;”>Everything you need to successfully cut to shreds</p>
    [/text_output][/vc_column][vc_column width=”1/3″][text_output]
    <div style=”display: table;”>
    <div style=”display: table-cell; vertical-align: middle;”>
    <div style=”margin-left: auto; margin-right: auto;”>

    [button shape=”pill” size=”regular” block=”true” href=”#” title=”Title“]
    <p style=”text-align: center; font-size: 1.5em;”>Buy now</p>
    [/button]

    </div>
    </div>
    </div>
    [/text_output][/vc_column][/vc_row]

    #358143

    Zeshan
    Member

    Hi there,

    Please replace your [vc_row] code with following:

    [vc_row inner_container="true" padding_top="20px" padding_bottom="20px" marginless_columns="true" bg_color="#222222"][vc_column width="2/3"][text_output]
    <h2 style="text-align: center;"><span style="color: #ffffff;">The Diet Coaching & Adjustments Manual</span></h2>
    <p style="font-size: 1.5em; text-align: center; color: #a4a4a4;">Everything you need to successfully cut to shreds</p>

    [/text_output][/vc_column][vc_column width="1/3" style="vertical-align: middle"][button shape="pill" size="regular" block="true" href="#" title="Title"]<span style="text-align: center; font-size: 1.5em;">Buy now</span>[/button][/vc_column][/vc_row]

    If you want to add spacing in between your columns, simply add following as inline CSS under Style field of your columns:

    padding-left: 15px; padding-right: 15px;
    

    Change 15px as per your preference to adjust the padding left and right.

    Hope this helps. 🙂

    Thank you.

    #358236

    Rippedbodyjp
    Participant

    Perfect, thank you very much for the swift replies and patience.

    #358315

    Zeshan
    Member

    You’re most welcome! 🙂