Archived

This topic is now archived and is closed to further replies.

Centering Content


9 posts in this topic

Posted · Report post

Hey there, I am trying to center the buttons. I have tried a few things...

Can't figure it out... ahh! Driving me nuts. Any help?

Share this post


Link to post
Share on other sites

Posted · Report post

Which buttons are you trying to relocate?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Try add to CSS rules this

btn-group .btn {
	  float:center;
	  margin-left:-5px;
	}

PageLines > Site Options > Custom Code > CSS Rules

Share this post


Link to post
Share on other sites

Posted · Report post

Sadly, no bueno... Here is the code I am using right now:

[pl_buttongroup] Constitution & Bylaws (.pdf) Code of Ethics (.pdf) [/pl_buttongroup]
[/code]

Is there another way to get the buttons to center without having to give it a custom class to float it? Ranglone: the button group on the page I provided a link for. Thanks for your help!

Share this post


Link to post
Share on other sites

Posted · Report post

The

tags are deprecated. I'd suggest removing those from your page. In Custom Code > CSS Rules add this:
.btn-group {
	    display: block;
	    float: right;
	    margin-right: 280px;
	    position: relative;
	}

Share this post


Link to post
Share on other sites

Posted · Report post

Awesome, that worked :-) Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

I was having similar trouble with the same issue - centering a button. The code listed above worked for me as well, so thank you!

However, I realized that since it is based on pixels it isn't "responsive" and causes alignment issues when viewing from other devices - mobile, tablet, etc. If you use a percentage instead of exact pixels then that should help resolve this issue and ensure that your button is centered when viewing from all devices. Just thought I'd pass along that tip...example of code is below. Oh, and you may need to play around with the exact percentage (e.g. 47% or 48%) in order to get the button exactly in the middle because it will depend on how big your button is. Hope this helps!

.btn-group {

display: block;

float: right;

margin-right: 50%;

position: relative;

}

Share this post


Link to post
Share on other sites

Posted · Report post

Excellent. Thank you for posting that.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites