This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions

View file

@ -0,0 +1,13 @@
Сместим мяч в центр при помощи `left/top=50%`, а затем приподымем его указанием `margin`:
```css
#ball {
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
}
```
[edit src="solution"]Полный код решения[/edit]

View file

@ -0,0 +1 @@
{"name":"ball-css","plunk":"YhrIoXAnr04KwNslT631"}

View file

@ -0,0 +1 @@
{"name":"ball-css","plunk":"YhrIoXAnr04KwNslT631"}

View file

@ -0,0 +1,31 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
}
</style>
</head>
<body>
<div id="field">
<img src="http://js.cx/clipart/ball.gif" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
}
</style>
</head>
<body>
<div id="field">
<img src="http://js.cx/clipart/ball.gif" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
</body>
</html>

View file

@ -0,0 +1,20 @@
# Поместите мяч в центр поля (CSS)
[importance 5]
Поместите мяч в центр поля при помощи CSS.
Исходный код:
[iframe height=200 src="task"]
Используйте CSS, чтобы поместить мяч в центр:
[iframe height=200 src="solution"]
<ul>
<li>CSS для центрирования может использовать размеры мяча.</li>
<li>CSS для центрирования не должен опираться на конкретный размер поля.</li>
</ul>
[edit src="task"]Исходный документ[/edit].

View file

@ -0,0 +1 @@
{"name":"ball-src","plunk":"RgW11R4kwR8uJPdPOQjd"}

View file

@ -0,0 +1 @@
{"name":"ball-src","plunk":"RgW11R4kwR8uJPdPOQjd"}

View file

@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
}
</style>
</head>
<body>
<div id="field">
<img src="http://js.cx/clipart/ball.gif" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
}
</style>
</head>
<body>
<div id="field">
<img src="http://js.cx/clipart/ball.gif" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
</body>
</html>

View file

@ -0,0 +1,12 @@
# Структура решения
Шаги решения:
<ol><li>
Для того, чтобы элементы окна не работали, их нужно перекрыть `DIV'ом` с большим `z-index`.</li>
<li>Внутри него будет лежать "экран" с полупрозрачностью. Чтобы он растягивался, можно дать ему `position: absolute` и указать все координаты `top/left/right/bottom`. Это работает в IE8+.</li>
<li>Форму можно отцентрировать при помощи `margin` или `display: table-cell` + `vertical-align` на внешнем `DIV`.</li>
</ol>
# Решение
[edit src="solution"]Открыть в песочнице[/edit]

View file

@ -0,0 +1 @@
{"name":"modal-login","plunk":"KyZ561hLR5xlkIOv0JyC"}

View file

@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
/* внешний DIV перекрывает всё окно */
#box {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
}
/* в нём находится полупрозрачный экран, на 20px меньше */
#box-inner {
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
background: blue;
opacity: 0.3;
filter: alpha(opacity=30);
}
/* форма находится не в экране, а рядом с ним, чтобы не быть полупрозрачной */
#box form {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /* центрирование */
margin: auto; /* центрирование */
height: 120px;
width: 300px;
border: 1px solid black;
padding: 5px 5px 5px 55px;
background: url(http://js.cx/clipart/key.png) 3px 5px white no-repeat;
}
</style>
</head>
<body style="height:2000px">
<p>Текст Текст Текст</p>
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
<p>Текст Текст Текст</p>
<div id="box">
<div id="box-inner">
</div>
<form>
Добро пожаловать!
<table>
<tr><td>Логин</td><td><input></td></tr>
<tr><td>Пароль</td><td><input></td></tr>
<tr><td colspan="2"><input type="submit" value="Войти"></td></tr>
</table>
</form>
</div>
</body>
</html>

View file

@ -0,0 +1 @@
{"name":"modal-login","plunk":"KyZ561hLR5xlkIOv0JyC"}

View file

@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
/* внешний DIV перекрывает всё окно */
#box {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
}
/* в нём находится полупрозрачный экран, на 20px меньше */
#box-inner {
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
background: blue;
opacity: 0.3;
filter: alpha(opacity=30);
}
/* форма находится не в экране, а рядом с ним, чтобы не быть полупрозрачной */
#box form {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /* центрирование */
margin: auto; /* центрирование */
height: 120px;
width: 300px;
border: 1px solid black;
padding: 5px 5px 5px 55px;
background: url(http://js.cx/clipart/key.png) 3px 5px white no-repeat;
}
</style>
</head>
<body style="height:2000px">
<p>Текст Текст Текст</p>
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
<p>Текст Текст Текст</p>
<div id="box">
<div id="box-inner">
</div>
<form>
Добро пожаловать!
<table>
<tr><td>Логин</td><td><input></td></tr>
<tr><td>Пароль</td><td><input></td></tr>
<tr><td colspan="2"><input type="submit" value="Войти"></td></tr>
</table>
</form>
</div>
</body>
</html>

View file

@ -0,0 +1,23 @@
# Форма + модальное окно
[importance 5]
Создайте при помощи HTML/CSS форму для логина в модальном окне.
[iframe height=280 src="solution" border=1 link]
Требования:
<ul>
<li>Кнопки окна вне формы не работают (даже на левый край нажать нельзя).</li>
<li>Полупрозрачный голубой "экран" отстоит от границ на `20px`.</li>
<li>Форма центрирована вертикально и горизонтально, её размеры фиксированы.</li>
<li>Посетитель может менять размер окна браузера, геометрия должна сохраняться.</li>
<li>Не ломается при прокрутке.</li>
</ul>
Браузеры: все основные, IE8+.
[edit src="task" task/]

View file

@ -0,0 +1 @@
{"name":"modal-login-src","plunk":"lbTp7pyiqYP0V5uJ2CFK"}

View file

@ -0,0 +1,18 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="height:2000px">
<p>Текст Текст Текст</p>
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
<p>Текст Текст Текст</p>
<img src="http://js.cx/clipart/key.png"/>
</body>
</html>

View file

@ -0,0 +1,29 @@
# Подсказка
Центрирование не работает из-за `position: absolute`.
# Решение
Центрирование не работает потому, что `position: absolute` автоматически меняет элементу `display` на `block`.
В однострочном случае можно сделать центрирование при помощи `line-height`:
```html
<!--+ run -->
<style>
.arrow {
position: absolute;
height: 60px;
border: 1px solid black;
font-size: 28px;
*!*
line-height: 60px;
*/!*
}
</style>
<div class="arrow">«</div>
```
Если же центрировать нужно несколько строк или блок, то есть и другие [техники центрирования](/css-center), которые сработают без `display:table-cell`.

View file

@ -0,0 +1,28 @@
# vertical-align + table-cell + position = ?
[importance 5]
В коде ниже используется вертикальное центрирование при помощи `table-cell + vertical-align`.
Почему оно не работает? Нажмите на просмотр, чтобы увидеть (стрелка должна быть в центре по вертикали).
```html
<!--+ run height=70 -->
<style>
.arrow {
position: absolute;
height: 60px;
border: 1px solid black;
font-size: 28px;
*!*
display: table-cell;
vertical-align: middle;
*/!*
}
</style>
<div class="arrow">«</div>
```
Как починить центрирование при помощи CSS? Свойства `position/height` менять нельзя.

View file

@ -0,0 +1,414 @@
# Центрирование горизонтальное и вертикальное
В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.
[cut]
## Горизонтальное
### text-align
**Для центрирования инлайновых элементов -- достаточно поставить родителю `text-align: center`**:
```html
<!--+ autorun height=50 -->
<style>
.outer {
*!*text-align: center;*/!*
border: 1px solid blue;
}
</style>
<div class="outer">Текст</div>
```
Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:
```html
<!--+ autorun height=50 -->
<style>
.outer {
*!*text-align: center;*/!*
border: 1px solid blue;
}
.inner {
width: 100px;
border: 1px solid red;
}
</style>
<div class="outer">
<div class="inner">Текст</div>
</div>
```
Впрочем, в примере выше блок будет центрирован в IE6,7 (это отклонение от стандарта).
### margin: auto
**Для всех браузеров, кроме IE6,7, блок по горизонтали центрируется `margin: auto`**:
```html
<!--+ autorun height=50 -->
<style>
.outer {
*!*text-align: center;*/!* /* Для IE<8 */
border: 1px solid blue;
}
.inner {
width: 100px;
border: 1px solid red;
*!*margin: auto;*/!* /* Для IE8+ и других браузеров */
}
</style>
<div class="outer">
<div class="inner">Текст</div>
</div>
```
В отличие от `width/height`, значение `auto` для `margin` само не появляется. Обычно `margin` равно конкретной величине для элемента, например `0` для `DIV`. Нужно поставить его явно.
Значение `margin-left:auto/margin-right:auto` заставляет браузер выделять под `margin` всё доступное сбоку пространство. А если и то и другое `auto`, то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации [Calculating widths and margins](http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins).
## Вертикальное
Для горизонтального центрирования всё просто. Вертикальное же изначальное не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.
Есть три основных решения.
### position:absolute + margin
**Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи `top:50%`:**
```html
<!--+ autorun height=100 -->
<style>
.outer {
position: relative;
height: 5em;
border: 1px solid blue;
}
.inner {
*!*
position: absolute;
top: 50%;
*/!*
border: 1px solid red;
}
</style>
<div class="outer">
<div class="inner">Текст</div>
</div>
```
Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.
**Высота центрируемого элемента должна быть известна.** Родитель может иметь любую высоту.
Если мы знаем, что это ровно одна строка, то её высота равна `line-height`.
**Приподнимем элемент на пол-высоты при помощи `margin-top`:**
```html
<!--+ autorun height=100 -->
<style>
.outer {
position: relative;
height: 5em;
border: 1px solid blue;
}
.inner {
position: absolute;
top: 50%;
*!*
margin-top: -0.625em;
*/!*
border: 1px solid red;
}
</style>
<div class="outer">
<div class="inner">Текст</div>
</div>
```
[hide text="Почему -0.625em?"]
При стандартных настройках браузера высота строки `line-height: 1.25`, если поделить на два `1.25em / 2 = 0.625em`.
Конечно, высота может быть и другой, главное чтобы мы её знали заранее.
[/hide]
Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи `left:50%` и отрицательного `margin-left`.
### Одна строка: line-height
**Вертикально отцентрировать одну строку в элементе с известной высотой `height` можно, указав эту высоту в свойстве `line-height`:**
```html
<!--+ autorun height=100 -->
<style>
.outer {
height: 5em;
*!*
line-height: 5em;
*/!*
border: 1px solid blue;
}
</style>
<div class="outer">
<span style="border:1px solid red">Текст</span>
</div>
```
Это работает, но лишь до тех пор, пока строка одна, а если содержимое вдруг переносится на другую строку, то начинает выглядеть довольно уродливо.
### Таблица с vertical-align
У свойства [vertical-align](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align), которое управляет вертикальным расположением элемента, есть два режима работы.
**В таблицах свойство `vertical-align` указывает расположение *содержимого* ячейки.**
Его возможные значения:
<dl>
<dt>`baseline`</dt>
<dd>Значение по умолчанию.</dd>
<dt>`middle`, `top`, `bottom`</dt>
<dd>Располагать содержимое посередине, вверху, внизу ячейки.</dd>
</dl>
Например, ниже есть таблица со всеми 3-мя значениями:
```html
<!--+ autorun height=130 -->
<style>
table { border-collapse: collapse; }
td {
border: 1px solid blue;
height: 100px;
}
</style>
<table>
<tr>
*!*
<td style="vertical-align: top">top</td>
<td style="vertical-align: middle">middle</td>
<td style="vertical-align: bottom">bottom</td>
*/!*
</tr>
</table>
```
Обратим внимание, что в ячейке с `vertical-align: middle` содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера `width:100%;height:100%` с одной ячейкой, у которой указать `vertical-align:middle`, и он будет отцентрирован.
Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение `display:table-cell`. Для элемента с таким `display` используются те же алгоритмы вычисления ширины и центрирования, что и в `TD`. И, в том числе, работает `vertical-align`:
Пример центрирования:
```html
<!--+ autorun height=130 -->
<div style="*!*display: table-cell; vertical-align: middle; */!* height: 100px; border: 1px solid red">
<button>Кнопка<br>с любой высотой<br>и шириной</button>
</div>
```
**Этот способ замечателен тем, что он не требует знания высоты элементов.**
Однако у него есть особенность. Вместе с `vertical-align` родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.
Чтобы его растянуть, нужно указать `width` явно, например: `300px`:
```html
<!--+ autorun height=130 -->
<div style="display: table-cell; vertical-align: middle; height: 100px; *!*width: 300px*/!*; border: 1px solid red">
<button>Кнопка<br>с любой высотой<br>и шириной</button>
</div>
```
Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы "сломана" -- ячейка есть, а собственно таблицы-то нет.
Это можно починить, завернув "псевдоячейку" в элемент с `display:table`, которому и поставим ширину:
```html
<!--+ autorun height=130 -->
<div style="*!*display: table; width: 100%*/!*">
<div style="display: table-cell; vertical-align: middle; height: 100px; border: 1px solid blue">
<button>Кнопка<br>с любой высотой<br>и шириной</button>
</div>
</div>
```
Если дополнительно нужно горизонтальное центрирование -- оно обеспечивается другими средствами, например `margin: 0 auto` для блочных элементов или `text-align:center` на родителе -- для других.
### Центрирование в строке с vertical-align
Для инлайновых элементов (`display:inline/inline-block`), включая картинки, свойство `vertical-align` центрирует *сам инлайн-элемент в окружающем его тексте*.
В этом случае набор значений несколько другой:
[iframe src="vertical-align" height="300" link edit border="1"]
Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента -- нет.
Допустим, высота внешнего элемента `120px`. Укажем её в свойстве `line-height`:
```html
<!--+ autorun height=150 -->
<style>
.outer {
line-height: 120px;
}
.inner {
display: inline-block; /* центрировать..*/
vertical-align: middle; /* ..по вертикали */
line-height: 1.25; /* переопределить высоту строки на обычную */
border: 1px solid red;
}
</style>
<div class="outer" style="height: 120px;border: 1px solid blue">
<span class="inner">Центрирован<br>вертикально</span>
</div>
```
Работает во всех браузерах и IE8+.
Свойство `line-height` наследуется, поэтому надо знать "правильную" высоту строки и переопределять её для `inner`.
### Центрирование с vertical-align без таблиц
Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или `display:table-cell` с `vertical-align`.
Если центрируются не-блочные элементы, например `inline` или `inline-block`, то `vertical-align` может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через `:before`).
Пример:
```html
<!--+ autorun -->
<style>
.before {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
display: inline-block;
vertical-align: middle;
}
</style>
<div class="outer" style="height:100px;border:1px solid blue">
<span class="before"></span>
<span class="inner" style="border:1px solid red">
Центрированный<br>Элемент
</span>
</div>
```
<ul>
<li>Перед центрируемым элементом помещается вспомогательный инлайн-блок `before`, занимающий всю возможную высоту.</li>
<li>Центрируемый блок выровнен по его середине.</li>
</ul>
Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через `:before`:
```html
<!--+ autorun -->
<style>
*!*.outer:before*/!* {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
display: inline-block;
vertical-align: middle;
}
/* добавим горизонтальное центрирование */
.outer {
text-align: center;
}
</style>
<div class="outer" style="height:100px; width: 100%; border:1px solid black">
<span class="inner" style="border:1px solid red">
Центрированный<br>Элемент
</span>
</div>
```
В пример выше добавлено также горизонтальное центрирование `text-align: center`. Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.
Это происходит потому, что центрируется *весь текст*, а перед `inner` находится пробел, который занимает место.
Варианта два:
<ol>
<li>Убрать лишний пробел между `div` и началом `inner`, будет `<div class="outer"><span class="inner">...`.</li>
<li>Оставить пробел, но сделать отрицательный `margin-left` у `inner`, равный размеру пробела, чтобы `inner` сместился левее.</li>
</ol>
Второе решение:
```html
<!--+ autorun -->
<style>
.outer:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
display: inline-block;
vertical-align: middle;
*!*
margin-left: -0.35em;
*/!*
}
.outer {
text-align: center;
}
</style>
<div class="outer" style="height:100px; width: 100%; border:1px solid black">
<span class="inner" style="border:1px solid red">
Центрированный<br>Элемент
</span>
</div>
```
## Итого
Обобщим решения, которые обсуждались в этой статье.
Для горизонтального центрирования:
<ul>
<li>`text-align: center` -- центрирует инлайн-элементы в блоке. В IE<8 центрирует всё, но это нестандартное поведение.</li>
<li>`margin: 0 auto` -- центрирует блок внутри родителя. У блока должна быть указана ширина.</li>
</ul>
Для вертикального центрирования одного блока внутри другого:
<dl>
<dt>Если размер центрируемого элемента известен, а родителя - нет</dt>
<dd>Родителю `position:relative`, потомку `position:absolute; top:50%` и `margin-top:-<половина-высоты-потомка>`. Аналогично можно отцентрировать и по горизонтали.</dd>
<dt>Если нужно отцентрировать одну строку в блоке, высота которого известна</dt>
<dd>Поставить блоку `line-height: <высота>`. Нужны конкретные единицы высоты (`px`,`em`...). Значение `line-height:100%` не будет работать, т.к. проценты берутся не от высоты блока, а от текущей `line-height`.</dd>
<dt>Высота родителя известна, а центрируемого элемента - нет.</dt>
<dd>Поставить `line-height` родителю во всю его высоту, а потомку поставить `display:inline-block`.</dd>
<dt>Высота обоих элементов неизвестна.</dt>
<dd>Два варианта:
<ol>
<li>Сделать элемент-родитель ячейкой таблицы при помощи `display:table-cell`(IE8) или реальной таблицы, и поставить ему `vertical-align:middle`. Отлично работает, но мы имеем дело с таблицей вместо обычного блока.</li>
<li>Решение с вспомогательным элементом `outer:before` и инлайн-блоками. Вполне универсально и не создаёт таблицу.</li>
</ol>
</dd>
</dl>

View file

@ -0,0 +1 @@
{"name":"vertical-align","plunk":"27XUcxyHO0B2hLCDseKR"}

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Картинка размером в <code>30px</code>, значения <code>vertical-align</code>:
<pre>
baseline(по умолчанию) <img src="http://js.cx/clipart/30.png">
middle(по середине) <img src="http://js.cx/clipart/30.png" style="vertical-align: middle">
sub<sub>вровень с &lt;sub&gt;</sub> <img src="http://js.cx/clipart/30.png" style="vertical-align: sub">
super<sup>вровень с &lt;sup&gt;</sup> <img src="http://js.cx/clipart/30.png" style="vertical-align: super">
text-top(верхняя граница вровень с текстом) <img src="http://js.cx/clipart/30.png" style="vertical-align: text-top">
text-bottom(нижняя граница вровень с текстом) <img src="http://js.cx/clipart/30.png" style="vertical-align: text-bottom">
</pre>
</body>
</html>