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
2
Answers
2 ways to center the button.
display: block;margin:0 auto;
on button.display: flex;justify-content: center;
on it, not.about
or.container-about
because they are not the parent element of button.Write CSS For .col-lg-6 { text-align: center; }
or Create the parent div for the button
.center { text-align: center; }
Saber más