Как добавить загрузчик слева от текста, используя css

Question

Я создал загрузчик с текстом, но он не соответствовал тексту, я также приложил скриншот для вашей справки.

Мой html:

var html = `<div class="messages warning">
    <h2>Network Drive Sync In Process....</h2>
    <blockquote>"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

Вместо использования фона в качестве вращающегося GIF вы можете поставить его как img. Тогда вы можете использовать это css:

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

Или оставить все как есть и добавить

background-position: center left; 

Answer 2

Может быть, вам просто нужно background-position:left center;