How do I center a button within it's div class

Question

I have a button that needs to be centered in it's div class ex. div="sanfrancisco-image". It's placed 17px from the bottom of the box, however it will appear center, even though I've placed justify-self:center; and align-items: center; tabs.

Here's the codepen link: https://codepen.io/holmedw/pen/KrvJEb

  .btn {
  align-items: center;
  position: absolute;
  padding: 0 20px;
  height: 40px;
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px black solid;
  border-radius: 1px;
  background: transparent;
  cursor: pointer;
  bottom: 17px;
  justify-self: center;
}

Possible duplicate of [How to center a button within a div?](https://stackoverflow.com/questions/7560832/how-to-center-a-button-within-a-div) — Thom Kiesewetter, Nov 27 '18 at 22:36

score 0 · Answer 1 · answered Nov 27 '18 at 20:51

0

No need for the align-items and justify-self. not sure they do any good, so try to remove them. on the css of the button? => set the following:

margin: 0px auto 0px auto;

try that and let me know if it works.

answered Nov 27 '18 at 20:51

Kosem

373
2
11

Victoria Le · Answer 2 · 2018-11-27T22:07:52.930

0

The quickest way to get what you want is to add position: relative to the .our-story-block, .our-dna-block, .sanfrancisco-block then you add a new div to include your button, like <div class="btn"><button>See More</button></div>. Set that div to position: absolute; bottom: 17px; width: 100%; left: 0; so it would center the absolute div inside a relative element. You won't need to include those values in your .btn css class anymore so just remove them.

  .btn {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 17px;
   } 
   .btn > button{
        padding: 0 20px;
        height: 40px;
        font-size: 1em;
        font-weight: 700;
        text-transform: uppercase;
        border: 2px black solid;
        border-radius: 1px;
        background: transparent;
        cursor: pointer;
   }

edited Nov 27 '18 at 22:07

answered Nov 27 '18 at 21:58

Victoria Le

860
6
15

Thank you so much for this. This is the one that worked. For further clarification why did you do the
– Edward Holmes Nov 28 '18 at 02:33
@EdwardHolmes I'm no expert but ` – Victoria Le Nov 28 '18 at 14:42

How do I center a button within it's div class

2 Answers2