我正在尝试对齐按钮旁边的加载图像(CSS)。我从STO帮助中尝试，但按钮旁边没有静态图像。

以下是jsfiddle

---

顺晟科技：

解决方案是用display inline-block将按钮和旋转器一起包装成一个元素，然后用display inline-block将旋转器本身包装成一个元素。

请参阅jsfiddle

试试这个！！！

在父div中围绕按钮和旋转器的div。给它一个类名。然后在css中为类显示flex，如下所示；

#loading-bar-spinner.spinner {
  left: 50%;
  margin-left: -20px;
  top: 50%;
  margin-top: -20px;
  position: absolute;
  z-index: 19 !important;
  animation: loading-bar-spinner 400ms linear infinite;
}

#loading-bar-spinner.spinner .spinner-icon {
  width: 20px;
  height: 20px;
  border: solid 4px transparent;
  border-top-color: #E4002B !important;
  border-left-color: #E4002B !important;
  border-radius: 50%;
  float: left;
}

@keyframes loading-bar-spinner {
  0% {
    transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

现在给wrapper一个flex的显示，以便将子节点定位在彼此相邻的位置，如下所示；

#loading-bar-spinner.spinner {
  left: 50%;
  margin-left: -20px;
  top: 50%;
  margin-top: -20px;
  position: absolute;
  z-index: 19 !important;
  animation: loading-bar-spinner 400ms linear infinite;
}

#loading-bar-spinner.spinner .spinner-icon {
  width: 20px;
  height: 20px;
  border: solid 4px transparent;
  border-top-color: #E4002B !important;
  border-left-color: #E4002B !important;
  border-radius: 50%;
  float: left;
}

@keyframes loading-bar-spinner {
  0% {
    transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

您还可以阅读有关flex项的justify-content和align-item的内容，以便根据需要定位子元素。 注意：别介意我的回复格式太差，我是用手机打字的

有关所做更改，请参阅代码中的注释。

#loading-bar-spinner.spinner {
  left: 50%;
  margin-left: -20px;
  top: 50%;
  margin-top: -20px;
  position: absolute;
  z-index: 19 !important;
  animation: loading-bar-spinner 400ms linear infinite;
}

#loading-bar-spinner.spinner .spinner-icon {
  width: 20px;
  height: 20px;
  border: solid 4px transparent;
  border-top-color: #E4002B !important;
  border-left-color: #E4002B !important;
  border-radius: 50%;
  float: left;
}

@keyframes loading-bar-spinner {
  0% {
    transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}