Need help on CSS alignment

Question

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

Output

You can add `text-align: center;` to the style group `.circle-one, .circle-two, .circle-three` — Yaakov David, Sep 29 '20 at 17:57

Himanshu Bhardwaj · Accepted Answer · 2020-09-29T19:23:08.523

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>

Thank you for the reply. I still have the space between three circles. I just attached the updated photo. How to bring the circle little bit closer — Gousiya Begum, Sep 29 '20 at 18:05
I dont want the space at the left side sir. Can you please help me ? — Gousiya Begum, Sep 29 '20 at 18:13
there are two images, which one you want as result, above one or below one — Himanshu Bhardwaj, Sep 29 '20 at 19:05
if you dont want the space at the left side and also want to decrease the space btw the circles then u can use use .row{display:flex; align-items:center;justify-content:space-around;} — Himanshu Bhardwaj, Sep 29 '20 at 19:21

score -1 · Answer 2 · answered Sep 29 '20 at 18:31

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;

Need help on CSS alignment

2 Answers2