8 replies to this topic

[srussel2]

Hey there,

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

 <center></center>
	<p align="center"></p>
	<p

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

[Rob]

Which buttons are you trying to relocate?

[batman]

Hi
Try add to CSS rules this

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

PageLines > Site Options > Custom Code > CSS Rules

[srussel2]

Sadly, no bueno...

Here is the code I am using right now:

 <center>[pl_buttongroup]
	<a class="btn btn-primary" href="http://www.kooikersociety.org/docs/KSAConstitution.pdf"><em class="icon-arrow-down icon-white"></em> Constitution & Bylaws (.pdf)</a>
	<a class="btn btn-primary" href="http://www.kooikersociety.org/docs/KSACOE.pdf"><em class="icon-arrow-down icon-white"></em> Code of Ethics (.pdf)</a>
	[/pl_buttongroup]</center>

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!

[Rob]

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;
	}

[srussel2]

Awesome, that worked :-) Thanks!

[tmacroe]

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;
}

[Rob]

Excellent. Thank you for posting that.

[Rob]

The topic was marked as resolved.