cannot center element when used in columns in html-CodePudding

<div >
        <div  style="border: groove;">
            <p >01</p>
            <h3>trending courses</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
        </div>
        <div ></div>
        <div  style="border: groove;">
            <p >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 >

        </div>
        <div  style="border: groove;">
            <p >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

CodePudding user response：

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.

CodePudding user response：

Use it to center all elements:

<div ></div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div  style="border: groove;">
    <!--