Thank you so much.

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

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!

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

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.

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]

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.