使用 CSS 将微调器放在图像容器的中心

debugcn 发表于 Dev

路易斯·阿尔维斯

如果不存在图像“foo.jpg”，我想将微调器放入图像容器的中心。

我已经尝试了下一个但没有成功

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
body {
  margin: 10px;
}

.drop-box-filled-totem {
  background: #F8F8F8;
  border: 5px dashed #219;
  width: 100%;
  height: 100px;
  text-align: center;
  /*padding: 50px 10px;*/
  padding: 5px;
  margin-left: 10px;
}

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<div class="container">
  <div class="col-md-3 col-lg-3" align="center">
    <div class="image-upload">
      <label for="file-input">
         <span> <img class="drop-box-filled-totem" 
            src="foo.jpg" 
             onerror="if (this.src != 'error.jpg') this.src='//ssl.gstatic.com/accounts/ui/avatar_2x.png'">
            <i class="fa fa-spinner fa-spin fa-fw"></i>
            <span class="sr-only">Carregando...</span>
         </span>
      </label>
    </div>
  </div>
</div>

连接器

当您在该容器上需要的只是一些 css 生成的内容时，不需要额外的项目容器。创建一个周边容器，将图标定位在伪元素上::after使用left: 50%; top: 50%;（这里50%对应周边容器的50%），然后通过issue修复错位transform(-50%, -50%)（这里百分比指的是图标，不是周边容器）。

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
body {
  margin: 10px;
}

.drop-box-filled-totem {
  background: #F8F8F8;
  border: 5px dashed #219;
  width: 100%;
  height: 100px;
  text-align: center;
  padding: 5px;
}

.drop-box-filled-totem-container {
  position: relative;
}

.drop-box-filled-totem-container::after {
  font-family: FontAwesome;
  content: "\f110";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: ;
  -webkit-animation: fa-spin-center 2s infinite linear;
  animation: fa-spin-center 2s infinite linear;
  transform-origin: top left;
}

@-webkit-keyframes fa-spin-center {
  0% {
    -webkit-transform: rotate(0deg) translate(-50%, -50%);
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    -webkit-transform: rotate(359deg) translate(-50%, -50%);
    transform: rotate(359deg)translate(-50%, -50%);
  }
}
@keyframes fa-spin-center {
  0% {
    -webkit-transform: rotate(0deg) translate(-50%, -50%);
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    -webkit-transform: rotate(359deg) translate(-50%, -50%);
    transform: rotate(359deg) translate(-50%, -50%);
  }
}

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<div class="container">
  <div class="col-md-3 col-lg-3" align="center">
    <div class="image-upload">
      <label for="file-input" style="border: 1px solid red">
         <span class="drop-box-filled-totem-container"> <img class="drop-box-filled-totem" 
            src="foo.jpg" 
             onerror="if (this.src != 'error.jpg') this.src='//ssl.gstatic.com/accounts/ui/avatar_2x.png'">
            <span class="sr-only">Carregando...</span>
         </span>
      </label>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。