-
AuthorPosts
-
August 13, 2015 at 12:29 am #357868
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.
August 13, 2015 at 1:11 am #357916Hi 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!
August 13, 2015 at 2:09 am #357975Thank 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
August 13, 2015 at 2:27 am #357996Hi 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.
August 13, 2015 at 4:48 am #358116I 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]August 13, 2015 at 5:41 am #358143Hi 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.
August 13, 2015 at 7:23 am #358236Perfect, thank you very much for the swift replies and patience.
August 13, 2015 at 9:34 am #358315You’re most welcome! 🙂
-
AuthorPosts