How to align the button horizontally to the center?

Question

i can't resolve this problem. I want the button in the center.

My HTML:

<section class="about">
      <div class="container-about">
        <div>
          <div class="col-lg-6">
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus mollitia possimus, perspiciatis iusto voluptates ipsa nam veritatis quibusdam excepturi, repudiandae similique ab a praesentium molestias eius quos tempora assumenda voluptatem.</p>
            <button>Saber más</button>
          </div>
        </div>
      </div>
    </section>

I Try this in my CSS:

.about {
    display: flex;
    justify-content: center;
}

.about button {
    font-size: 22px;
    padding: 10px 20px;
    background-color: #0d0d0d;
    color: #fff;
    border: 2px solid #0d0d0d;
    border-radius: 0px;
    text-transform: uppercase;
    transition: all 0.2s linear;
    transition: all 0.9s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-shadow: 0.5px 0px 0.5px #000;

I try with display: flex and justify-content-center in the container-about

Try adding `align-items: center` where the “.about” class is — Parking Master, Mar 02 '23 at 00:18
`justify-content` only applies to the immediate children of the flex container. The button isn't a direct child of `.about`. — ray, Mar 02 '23 at 01:05

Shuo · Answer 1 · 2023-03-02T00:50:18.307

2 ways to center the button.

Add display: block;margin:0 auto; on button.

.about {
  display: flex;
  justify-content: center;
}

.about button {
  display: block;
  margin: 0 auto;
  font-size: 22px;
  padding: 10px 20px;
  background-color: #0d0d0d;
  color: #fff;
  border: 2px solid #0d0d0d;
  border-radius: 0px;
  text-transform: uppercase;
  transition: all 0.2s linear;
  transition: all 0.9s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  text-shadow: 0.5px 0px 0.5px #000;
}

<section class="about">
  <div class="container-about">
    <div>
      <div class="col-lg-6">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus mollitia possimus, perspiciatis iusto voluptates ipsa nam veritatis quibusdam excepturi, repudiandae similique ab a praesentium molestias eius quos tempora assumenda voluptatem.</p>
        <button>Saber más</button>
      </div>
    </div>
  </div>
</section>

Wrap button by a div and add display: flex;justify-content: center; on it, not .about or .container-about because they are not the parent element of button.

.center-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.about button {
  font-size: 22px;
  padding: 10px 20px;
  background-color: #0d0d0d;
  color: #fff;
  border: 2px solid #0d0d0d;
  border-radius: 0px;
  text-transform: uppercase;
  transition: all 0.2s linear;
  transition: all 0.9s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  text-shadow: 0.5px 0px 0.5px #000;
}

<section class="about">
  <div class="container-about">
    <div>
      <div class="col-lg-6">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus mollitia possimus, perspiciatis iusto voluptates ipsa nam veritatis quibusdam excepturi, repudiandae similique ab a praesentium molestias eius quos tempora assumenda voluptatem.</p>
        <div class="center-button"><button>Saber más</button></div>
      </div>
    </div>
  </div>
</section>

score 0 · Accepted Answer · answered Mar 02 '23 at 04:58

0

Write CSS For .col-lg-6 { text-align: center; }

or Create the parent div for the button

.center { text-align: center; }

Saber más

answered Mar 02 '23 at 04:58

Deva

97
2

How to align the button horizontally to the center?

2 Answers2