html - 调整大小并居中对齐圆圈内的图标

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%;
}

Demo