Jump to content


Photo
- - - - -

Centering Content

Resolved

  • Please log in to reply
8 replies to this topic

#1 srussel2

srussel2

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 09 July 2012 - 07:19 PM

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?

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 July 2012 - 08:23 PM

Which buttons are you trying to relocate?

#3 batman

batman

    Bat Learning

  • Members

  • 1733 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 09 July 2012 - 08:28 PM

Hi
Try add to CSS rules this
 btn-group .btn {
	  float:center;
	  margin-left:-5px;
	}
PageLines > Site Options > Custom Code > CSS Rules

#4 srussel2

srussel2

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 09 July 2012 - 08:43 PM

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!

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 July 2012 - 09:10 PM

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


#6 srussel2

srussel2

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 09 July 2012 - 09:27 PM

Awesome, that worked :-) Thanks!

#7 tmacroe

tmacroe

    Newbie

  • Members
  • 5 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 21 November 2012 - 06:39 PM

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

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 November 2012 - 03:59 AM

Excellent. Thank you for posting that.

#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 November 2012 - 04:00 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved