調整圖標大小並居中對齊圓圈內

Question

我有一個網絡圖標列表，我試圖將它們顯示為帶有白色背景的圓圈。 這就是我現在所擁有的。 我正在嘗試使圖標適合圈子。

.logo {
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #1e1e1e;
  width: 100%;
  height: 100%;
  max-height: 88px;
  max-width: 88px;
  margin: 0 auto;
  background: url('/networks/network-logo-bg@2x.png') center center no-repeat;
  background-size: contain;
  img {
    width: 80%;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: #000;
    margin: 0 auto;
    @include lazyLoad(null);
  }
}

HTML：

<div key={index} className="logo">
            <img  className="lazyload" src={logo.icon} alt={logo.name}/>
          </div>

我希望圖標位於圓圈內並與中心對齊。

Answer 1

您可以嘗試如下操作：

HTML：

<div class="circle">
  <img src="https://image.flaticon.com/icons/svg/826/826356.svg">
</div>

CSS：

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: black;
  display: flex;
  justify-content: center;
}

img {
  width: 50%;
}

演示