Need help on CSS alignment [duplicate] - html

Question

This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Center image using text-align center?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I am trying to create circle cards using HTML and CSS. Upon click I am trying to open a web URL which is working perfectly fine for me.
But then I am not able set the alignment properly.
I tried display: flex to get the images side by side but the space between circle card is more but minimize space?
And I am not able to set the name of the circle in the center of the image. Can anyone please help me how to do this?
.circle {
background: rgba(15, 28, 63, 0.125);
border-radius: 50%;
height: 8em;
object-fit: cover;
width: 8em;
}
h1 {
text-align: center;
}
.row {
display: flex;
}
.circle-one, .circle-two, .circle-three {
flex: 33.33%;
padding: 5px;
}
<div>
<!-- your widget template -->
<h1> Hello World </h1>
<div class="row">
<div class="circle-one">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://images.unsplash.com/photo-1555448248-2571daf6344b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Tyler">
</a>
<h5> Circle One</h5>
</div>
<div class="circle-two">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=1000&q=80" alt="Tyler">
</a>
<h5> Circle Two</h5>
</div>
<div class="circle-three">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_960_720.jpg" alt="Tyler">
</a>
<h5>Circle Three</h5>
</div>
</div>
</div>
This is what I get

Answer 1

use display flex
use align-items:center
.circle {
background: rgba(15, 28, 63, 0.125);
border-radius: 50%;
height: 8em;
object-fit: cover;
width: 8em;
}
h1 {text-align: center;}
.row {
display: flex;
align-items:center;
justify-content:space-around;
}
.circle-one, .circle-two, .circle-three {
flex: 33.33%;
padding: 5px;
display:flex;
flex-direction:column;
align-items:center;
}
<div>
<!-- your widget template -->
<h1> Hello World </h1>
<div class="row">
<div class="circle-one">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://images.unsplash.com/photo-1555448248-2571daf6344b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Tyler">
</a>
<h5> Circle One</h5>
</div>
<div class="circle-two">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=1000&q=80" alt="Tyler">
</a>
<h5> Circle Two</h5>
</div>
<div class="circle-three">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_960_720.jpg" alt="Tyler">
</a>
<h5> Circle Three</h5>
</div>
</div>
</div>

Answer 2

well, It is quite a simple task,
can be done in many ways. one of them is,
add div around your text (circle one , circle two, and circle three) and (img + a) tag
and apply css properties to the classes in css.
display: flex;
align-items: center;
justify-content-center;