alexilin

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

Линии текста

1. Top line — верхняя линия строки

2. Text-top line — линия над текстом, включая все символы над ним (символ ударения и т.п.). Верхняя граница кегельной площадки шрифта.

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

Top line и text-top line на первый взгляд выглядят одинаково. Однако бывают ситуации когда top line располагается выше чем text-top line. Например, когда в тексте есть изображение, по высоте превосходящее кегель шрифта.

3. Middle line — средняя линия, проходящяя на уровне половины высоты буквы «x».

4. Baseline — основная линия текста. Воображаемая линия на которой «сидят» все буквы.

5. Text-bottom line — линия под текстом, включая нижние выносные элементы букв (например «j», «у», «ф»). Нижняя граница кегельной площадки шрифта.

6. Bottom line — нижняя линия строки.

Выравнивание изображений по умолчанию

По умолчанию, нижняя граница изображения совпадает с baseline, если к изображению не применяются внешние отступы. На примере ниже у изображения присутствует нижний внешний отступ, равный 5px.

Использование CSS для вертикального выравнивания

Для вертикального выравнивания с помощью CSS используется свойство vertical-align. Давайте рассмотрим различные варианты применения этого свойства.

Top

Верхняя граница изображения совпадает с верхним краем строки.

1

img {vertical-align: top}

Text-top

Верхняя граница изображения совпадает с верхней границей кегельной площадки шрифта.

1

img {vertical-align: text-top}

Middle

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

1

img {vertical-align: middle}

Baseline

Несмотря на то, что изображения по умолчанию выравниваются относительно baseline, вы можете задать такое выравнивание вручную.

1

img {vertical-align: baseline}

Text-bottom

Нижняя граница изображения совпадает с нижней границей кегельной площадки шрифта.

1

img {vertical-align: text-bottom}

Bottom

Нижняя граница изображения совпадает с нижним краем строки.

1

img {vertical-align: bottom}

Sub

Нижняя граница изображения совпадает с основной линией текста в нижнем регистре.

1

img {vertical-align: sub}

Super

Нижняя граница изображения совпадает со основной линией (baseline) текста в верхнем регистре.

1

img {vertical-align: super}

Значение в различных единицах

Значения свойства vertical-align также можно задавать в различных единицах, например в %. Положительные значения поднимают изображение относительно высоты строки (line-height), отрицательные — опускают.

1

img {vertical-align: 30%}

1

img {vertical-align: -30%}

Значения заданные например в px или em выравнивают изображение не относительно высоты строки, а относительно основной линии текста.

Оригинал: Aligning inline images with the vertical-align property

Этот пример покажет вам как можно реализовать простое увеличение изображений с помощью свойства overflow. Иногда на странице не хватает места для размещения полноразмерных изображений, но в тоже время не хочется ограничиваться маленькими превью. Данный способ позволяет ограничить размер изображений, а при наведении указателя мыши показывать их в полном размере.

В основе этого способа лежит не фактическое изменение размера изображения, а изменение его видимой области, с помощью свойства overflow. Это свойство влияет на отображение содержимого, в случае если это содержимое превышает размеры родительского контейнера. Свойство overflow может принимать следующие значения: visible, hidden, scroll и auto. В этом примере мы будем использовать значение hidden, чтобы скрыть часть изображения, и visible чтобы сделать эту часть видимой при наведении указателя мыши.

Идея заключается в том, чтобы разместить изображение в определенном контейнере. Поскольку мы говорим об изображениях, то в роли такого контейнера будет выступать ссылка. Делаем контейнер блочным, указываем необходимые размеры и устанавливаем относительное позиционирование. Изображение внутри контейнера имеет абсолютное позиционирование и отрицательные левый и верхний отступы.

Этот способ можно применять как для одного, так и для нескольких изображений.

<a href="#"><img src="image.jpg"  alt="Мое изображение" /></a>

a{
   display:block;
   float:left;
   width:100px;
   height:100px;
   overflow:hidden;
   position:relative;
   z-index:1;		
}
a img{
   position:absolute;
   top:-20px;
   left:-50px;	
}

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

a img{
   position:absolute;
   top:-20px;
   left:-50px;	
}
a#image1 img{
   top:-28px;
   left:-55px;	
}	
a#image2 img{
   top:-18px;
   left:-48px;	
}	
a#image3 img{
   top:-21px;
   left:-30px;	
}	
.
.
.

И, наконец, прописываем свойства, чтобы изображение стало видимым при наведении мыши:

a:hover{
   overflow:visible;
   z-index:1000;
   border:none;		
}

Как вы заметили для обоих состояний контейнера используется свойство z-index. Это важно, поскольку при наведении указателя нам нужно расположить изображение выше чем соседние изображения.

Оригинал: Create Resizing Thumbnails Using Overflow Property

В этой статье создадим анимированный индикатор загрузки на «чистом» CSS. Для создания нам потребуется 3 элемента: внешний контейнер и 2 вложенных.

Укажем фоновое изображение для контейнера и установим фиксированную ширину и высоту. Первый дочерний элемент span будет выступать в качестве индикатора. Второй дочерний элемент em будет абсолютно спозиционирован над индикаторо. Элемент em имеет тот же фон, что и контейнер, поэтому он создает эффект остановки индикатора на определенном значении.

Чтобы сохранить семантику насколько это возможно был использован список dl для нескольких значений. Если вам нужен всего один индикатор вы можете использовать другой элемент.

<dd>
	<span><em style="left:100px">50%</em></span>
</dd>

Использование инлайновых стилей для позиционирования элемента em, обусловлено тем, что так более удобно прописывать значения.

Анимация реализована с помощью анимированного GIF. Элемент span имеет фоновое изображение шириной 200px, который показывает загрузку с 0 до 200px. Независимо от того, какой процент мы указываем индикатор проходит весь путь и останавливается. Эффект остановки осуществляется с помощью em, как уже было сказано ранее.

Т.к. индикатор имеет ширину равную 200px и элемент em также шириной в 200px, то каждый процент равен 2px. Поэтому для значения 50% необходимо указывать смещение равное 100px, для 24% — 48px, 75% — 150px и т.д.

Оригинал: Pure CSS Animated Progress Bar