cannot center element when used in columns in html - html

Question

<div class="row">
<div class="col-lg-3 " style="border: groove;">
<p class="circle col-xs-1 center-block">01</p>
<h3>trending courses</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-3" style="border: groove;">
<p class="circle text-center">02</p>
<h3>books&library</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit nostrum voluptates tempore, pariatur nobis
tempora repellendus deserunt suscipit, sed ex nihil eum impedit maiores quia modi qui aut velit
veritatis quam deleniti? Quasi dolor, asperiores ut cumque laboriosam accusamus eveniet esse. Officiis
quidem perferendis qui.</p>
</div>
<div class="col-lg-1">
</div>
<div class="col-lg-3" style="border: groove;">
<p class="circle">03</p>
<h3>certified teachers</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
</div>
Used bs-5,bootstrap.bundle.min.css
This is the below output for this code
3. This is the code of css
.circle {
border-radius: 50%;
width: 60px;
height: 60px;
padding: 10px;
background: purple;
border: 3px solid #000;
display: flex;
color: #fff;
text-align: center;
font: 28px arial, sans-serif;
}
I tried various ways of flex, it did not work until I change margin
Please help me, why this is not working

Answer 1

text: center on your .circle element can't work because it will only center text inside the element and not the element itself.
If what you want to center the circle then you have to set margin to auto for the element .
Or if you want to do it using flexbox then you have to wrap your p element with a div which has display: flex and justify-content: center styles.

Answer 2

Here's a flexbox-only solution:
.circle {
border-radius: 50%;
width: 60px;
height: 60px;
padding: 10px;
background: purple;
border: 3px solid #000;
display: flex;
color: #fff;
text-align: center;
font: 28px arial, sans-serif;
}
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-3 " style="border: groove;">
<!-- 👇 flexbox wrapper for circle -->
<div class="d-flex justify-content-center">
<p class="circle col-xs-1 center-block">01</p>
</div>
<h3 class="text-center">trending courses</h3>
<p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-3" style="border: groove;">
<!-- 👇 flexbox wrapper for circle -->
<div class="d-flex justify-content-center">
<p class="circle text-center">02</p>
</div>
<h3 class="text-center">books&library</h3>
<p class="text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit nostrum voluptates tempore, pariatur nobis tempora repellendus deserunt suscipit, sed ex nihil eum impedit maiores quia modi qui aut velit veritatis quam deleniti? Quasi dolor, asperiores
ut cumque laboriosam accusamus eveniet esse. Officiis quidem perferendis qui.</p>
</div>
<div class="col-lg-1">
</div>
<div class="col-lg-3" style="border: groove;">
<!-- 👇 flexbox wrapper for circle -->
<div class="d-flex justify-content-center">
<p class="circle">03</p>
</div>
<h3 class="text-center">certified teachers</h3>
<p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
</div>
If you wrap each circle with a flexbox that has justify-content: center;, any items in the flexbox will be centered horizontally.
EDIT: OP wanted to center paragraph text as well.

Answer 3

Use it to center all elements:
<div class="col-lg-3 d-flex flex-column align-items-center justify-content-center"></div>

Answer 4

Try using margin:auto in css or m-auto in bootstrap
Using Css
.circle {
margin:auto
}
Using BootStrap add a class name to the div m-auto
<p class="circle text-center m-auto">02</p>

Answer 5

Using Flex
Add a class called dop to parent and chi to child circle
<div className="col-lg-3 dop" style={{ border: "groove" }}>
<p className="circle text-center chi">02</p>
CSS:
.dop {
display: flex;
flex-direction: column;
}
.chi {
align-self: center;
}
Try This