htmlcsshorizontal-alignment

How to align the button horizontally to the center?


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>

enter image description here

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


Solution

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

    or Create the parent div for the button

    .center { text-align: center; }

    Saber más