如何使用css在文本左侧添加加载程序

Question

我创建了一个带有文本的加载程序，但它不适合文本，我还附上了屏幕截图供您参考。

我的html：

         var html = "<div class=\"messages warning\">\n" +
      "<h2>Network Drive Sync In Process....</h2>\n" +
      "Please do not close or refresh this window during process</blockquote></div>";
    jQuery("#block-system-main").html(html);

和我的CSS：

 .messages.warning {
 display:    none;
 position:   relative;
 height:     50%;
  width:      50%;
  background: rgba( 255, 255, 255, .8 )
 url('http://i.stack.imgur.com/FhHRx.gif')
 no-repeat;
 }

.messages.warning{
overflow: hidden;
 }
.messages.warning {
display: block;
}

我想在左侧文本的中间调整加载程序，当前您可以在文本顶部看到它。期待您的帮助。

Answer 1

也许您只需要background-position:left center;

Answer 2

您可以将其作为img而不是使用背景作为微调gif。然后，您可以使用此CSS：

.messages.warning {
 display:    none;
 position:   relative;
 height:     50%;
 width:      50%;
 display: flex;
 align-items: center;
}

或保留原样并添加

background-position: center left;