Centering a button

• 

  crjohnsonltd · Member · Apr 3, 2017 at 5:32 am

  • Copy link
  • Add topic to favorites

  At the bottom of my homepage I have the Contact button set to centre, but for some reason it is left aligning. Can you please help?

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 3, 2017 at 7:38 am

  • Copy link

  Hi there,
  It’s because you have applied “text-align: center” to

  <li>
  which is a child of the block element, that is
  <ul>
  You have to apply text-align center to the block element itself.

  So do this:
  Assign a class(contact_btn) to the
  <ul>
  of the contact us button like this:

  <ul class="contact_btn">
        <li class="button" style="text-align:center;">
              <a href="https://leasecarconz.wordpress.com/contact/">Contact Us</a>
        </li>
  </ul>

  Now target this button using CSS and add text-align: center;:

  ul.contact_btn {
      text-align: center;
  }

  This will move the button to the center of the page.

  Hope this helps :)

• 

  otpidusprime · Member · Apr 3, 2017 at 7:41 am

  • Copy link

  I am sorry, there has been so issue with the formatting of the previous answer. Here’s the answer re-formatted correctly.
  ____________________

  Hi there,
  It’s because you have applied “text-align: center” to li tag, which is a child of the block element, that is theul tag. You have to apply text-align center to the block element itself.

  So do this:
  Assign a class(contact_btn) to the ul tag of the contact us button like this:

  <ul class="contact_btn">
        <li class="button" style="text-align:center;">
              <a href="https://leasecarconz.wordpress.com/contact/">Contact Us</a>
        </li>
  </ul>

  Now target this button using CSS and add text-align: center:

  ul.contact_btn {
      text-align: center;
  }

  This will move the button to the center of the page.

  Hope this helps :)

• 

  otpidusprime · Member · Apr 3, 2017 at 7:41 am

  • Copy link

  I am sorry, there has been some issue with the formatting of my previous answer. Here’s the answer re-formatted correctly.
  ____________________

  Hi there,
  It’s because you have applied “text-align: center” to li tag, which is a child of the block element, that is theul tag. You have to apply text-align center to the block element itself.

  So do this:
  Assign a class(contact_btn) to the ul tag of the contact us button like this:

  <ul class="contact_btn">
        <li class="button" style="text-align:center;">
              <a href="https://leasecarconz.wordpress.com/contact/">Contact Us</a>
        </li>
  </ul>

  Now target this button using CSS and add text-align: center:

  ul.contact_btn {
      text-align: center;
  }

  This will move the button to the center of the page.

  Hope this helps :)

• 

  otpidusprime · Member · Apr 3, 2017 at 7:45 am

  • Copy link

  Okay, i suppose i broke the CSS of this forum page because i used raw ul and li codes with my answer.

  Sorry for this.

  Still, let me know if you do not understand anything.

• 

  otpidusprime · Member · Apr 3, 2017 at 1:43 pm

  • Copy link

  CORRECTION
  It seems like i broke the HTML layout of this forum, not the CSS.

  Sorry for this.

  Still, let me know if you do not understand anything.

• 

  crjohnsonltd · Member · Apr 3, 2017 at 9:30 pm

  • Copy link

  Hi there,

  I tried that and it didn’t work for me. It’s still appearing left aligned.

• 

  otpidusprime · Member · Apr 4, 2017 at 7:08 am

  • Copy link

  It’s not working because you have added the CSS code:

  ul.contact_btn {
      text-align: center;
  }

  but not added the contact_btn class in the ul tag.
  Like this:

  <ul class="contact_btn">
        <li class="button" style="text-align:center;">
              <a href="https://leasecarconz.wordpress.com/contact/">Contact Us</a>
        </li>
  </ul>

  Check this out:
  http://prnt.sc/es7e3a

• 

  crjohnsonltd · Member · Apr 4, 2017 at 7:16 am

  • Copy link

  I swear I added that part in haha. Thanks heaps, all sorted :)

• 

  otpidusprime · Member · Apr 4, 2017 at 7:26 am

  • Copy link

  Awesome! Great to know everything works :D