skip to Main Content

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

2

Answers


  1. 2 ways to center the button.

    1. 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>
    1. 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>
    Login or Signup to reply.
  2. Write CSS For .col-lg-6 { text-align: center; }

    or Create the parent div for the button

    .center { text-align: center; }

    Saber más

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search