html - 在 CSS 对齐方面需要帮助

问题描述

我正在尝试使用 HTML 和 CSS 创建圆形卡片。单击后，我试图打开一个对我来说非常好用的 Web URL。

但是我无法正确设置对齐方式。

我试图display: flex并排获得图像，但圆卡之间的空间更大但最小化空间？

而且我无法在图像中心设置圆圈的名称。谁能帮助我如何做到这一点？

.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>

这就是我得到的

标签： htmlcssflexbox

使用显示弹性
使用对齐项目：中心

.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>

html - 在 CSS 对齐方面需要帮助

问题描述

解决方案

推荐阅读