Question 168849 in Html Question posted in
Some basic documentation can be found here.

At less than 1199px, why are HTML buttons aligning to the left of the page instead of being centered?

I have the created the following layout using Bootstrap 5 (link to fiddle below). The rows of buttons are aligned as I wish at 1200px and above but when the XL breakpoint is reached at 1199px, the buttons align to the left of the container instead of being centered.

The fiddle is here: https://jsfiddle.net/mfen723/xrdcq9g6/11/

This is despite using flexbox to center the content of each row:

 <div class="row pb-4 d-flex justify-content-center">
      <div class="col-xl-4">
          <p class="btn btn-warning btn-lg"><a href="resources-art-therapy-clinic.html" class="lit-link">Art Therapy<br>Clinical Literature<br>Source Material</a></p>
      </div>
      <div class="col-xl-4">
           <p class="btn btn-warning btn-lg "><a href="#" class="lit-link">Resilience<br>Spiritual Development</a></p>
      </div>
      <div class="col-xl-4">
            <p class="btn btn-warning btn-lg"><a href="resources-literature-integrative-medicine.html" class="lit-link">Integrative Medicine</a></p>
      </div>
 </div>

I can’t work out why the buttons are aligning left, so any help much appreciated. The layout is overlaid on a parallax background, so I’m not sure if that’s what is preventing content of the rows being centered.

Tags:

2

Answers


  1. 0

    For aligning flex children center, you have to apply center properties on the parent div not on the child itself:

    <div class="col-xl-4" style="display:flex;align-items:center;justify-content: center;">
  <p class="btn btn-warning btn-lg">
      <a href="resources-literature-rudolph-steiner.html" class="lit-link">Rudolph Steiner</a>
  </p>
</div>
    Login or Signup to reply.
  2. 0

    The p elements are aligning left because the parent div is full width and the element aligns to the left by default. Apply margin auto to both left and right to this element to center it. In bootstrap this is by adding the class mx-auto to the element <p class="btn btn-arning btn-lg> as follows:

    <p class="btn btn-warning btn-lg mx-auto"><a>...</a></p>

    Marked up fiddle here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search