Простая HTML / CSS Help.Не могу понять это!

Question

Я пытаюсь выстроить некоторый текст между двумя изображениями слева и справа.Почему он не движется вверх?

<img src="srchere" /><span style="padding-bottom:10px;">Some text right here!</span><img src="srchere" />

Два изображения больше текста, поэтому выглядит так, будто текст не выровнен и расположен ниже изображений.Как мне поднять текст вверх?Код, приведенный выше, похоже, не сдвигает текст вверх.

Спасибо.

Answer 1

Если вы хотите, чтобы изображения были выровнены по вертикали с текстом, вам нужно использовать:

vertical-align: middle

Обратите внимание, что ваш padding-bottom может немного скинуть это.

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

Answer 2

HTML:

<div>
<img src="srchere" />
<span>Some text right here!</span>
<img src="srchere" />
</div>

CSS:

div {
    display:block;
}
img {
    height:30px;
    width:30px;
}
img, span {
    vertical-align:top;
    display:inline-block;
}

Answer 3

Если вы хотите настроить вручную, это может сделать

<span style="vertical-align:100%"> 

увеличить / уменьшить процент, пока вы не удовлетворяете

Answer 4

Под "вверх" я предполагаю, что вы имеете в виду выровнены по верху коробки контейнера. Это должно делать то, что вы хотите:

<img style="float: left;" src="...">
<p style="float: left;">Filler text. Filler text. Filler text.</p>
<img style="float: right;" src="...">

Answer 5

Попробуйте добавить align="absmiddle" атрибут к изображениям.