Вертикальное выравнивание img и текста внутри <p>

Question

Я не могу получить img и текст в промежутке по вертикали:

  <p class="login-button">
                    <input type="submit" id="login-submit" value="Log On" /><img style="padding-left:20px;" id="loadingDiv" src="/Content/ib/images/ajax-loader.gif" />
                    <span id="error" style="color:red; padding-left:13px;">text </span>

                </p>

Есть идеи? Я попробовал:

.login-button{ vertical-align:middle; height:30px; line-height:30px;}
.login-button img{ vertical-align:middle;}

Answer 1

Я настроил демо для вас по адресу: http://jsfiddle.net/audetwebdesign/dCAkx/

Я немного упростил ваш CSS и добавил немного цвета фона и отступов.

Вам необходимо применить свойство vertical-align ко всем встроенным элементам, которые вы хотите выровнять.

Свойство vertical-align не наследуется, поэтому его необходимо применить ко всем соответствующим элементам.

Вы можете применять отступы и поля для управления расстоянием между текстом и изображением.

Вы можете немного поэкспериментировать, отрегулировав line-height контейнера p, а также попробовать другие значения выравнивания, такие как top, bottom, baseline.

Этот трюк стоит освоить, потому что он затрагивает ключевую концепцию работы блочной модели CSS, и этот шаблон очень распространен, поэтому хороший прием в вашем наборе инструментов CSS.

Answer 2

vertical-align: middle не работает на элементах с display: block.Сделайте их display: inline, если возможно, или display: table-cell, если нет.

Также может помочь http://mathiasbynens.be/demo/center-vertically-inside-float.

Answer 3

Вот краткий пример:

Демо

Вы можете легко изменять значения в соответствии со своими потребностями.

Iтолько что добавил обертку div вокруг изображения и диапазон с именем wrap

Затем добавил это в CSS:

.wrap{ 
    position:absolute; 
    top:50%; 
    height:240px; /* Make this whatever you want your height with */
    margin-top:-120px; /* Negative half of the height */
}

Answer 4

display:table-cell;
vertical-align:middle;