Говоря об этой проблеме, некоторые люди могут спросить: нет ли в CSS атрибута вертикального выравнивания для установки вертикального центрирования? Даже если некоторые браузеры не поддерживают это, мне просто нужно немного добавить CSS.
Хакерских технологий достаточно! Поэтому я должен сказать здесь несколько слов. Атрибут вертикального выравнивания действительно существует в CSS, но он встречается только для элементов, имеющих атрибут valign в HTML-элементе (X).
Эффективно, например, <td>, <th>, <caption> и т. д. в элементах таблицы. Такие элементы, как <div> и <span>, не имеют функции valign, поэтому для них нельзя использовать вертикальное выравнивание.
эффект.
Связанное руководство: N способов центрировать div по горизонтали
1. Однорядное вертикальное центрирование.
Если в контейнере только одна строка текста, центрировать ее относительно просто. Нам нужно всего лишь установить ее фактическую высоту, равную высоте line-height.
нравиться:
дел {
высота: 25 пикселей;
высота строки: 25 пикселей;
переполнение: скрыто;
}
Этот код очень прост. Параметр overflow:hidden используется позже, чтобы предотвратить выход содержимого за пределы контейнера или автоматический перенос строк, чтобы эффект вертикального центрирования не мог быть достигнут. Подробнее о CSS
Процедура.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<title> Вертикально центрировать одну строку текста</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
тело {размер шрифта: 12 пикселей; семейство шрифтов: tahoma;}
дел {
высота: 25 пикселей;
высота строки: 25 пикселей;
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
}
</стиль>
</голова>
<тело>
<div>Теперь мы хотим центрировать этот текст по вертикали! </div>
</тело>
</html>
2. Вертикальное центрирование нескольких строк текста неизвестной высоты.
Если высота части контента является переменной, то мы можем использовать последний метод, используемый для достижения горизонтального центрирования, упомянутый в предыдущем разделе, а именно установить Padding так, чтобы верхнее и нижнее
Значения заполнения могут быть одинаковыми. Опять же, это «внешний» способ вертикального центрирования, это просто способ заставить текст полностью заполнить <div>. Вы можете использовать что-то вроде
Следующий код:
дел {
отступ: 25 пикселей;
}
Преимущество этого метода в том, что он может работать в любом браузере, а код очень прост, но обязательным условием для применения этого метода является то, что высота контейнера должна быть масштабируемой.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<title> Вертикальное центрирование многострочного текста</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
тело {размер шрифта: 12 пикселей; семейство шрифтов: tahoma;}
дел {
отступ: 25 пикселей;
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
ширина: 760 пикселей;
}
</стиль>
</голова>
<тело>
<div><pre>Теперь мы хотим центрировать этот текст по вертикали!
дел {
отступ: 25 пикселей;
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
}
</pre></div>
</тело>
</html>
3. Центрирование многострочного текста фиксированной высоты.
В начале этой статьи мы говорили, что атрибут вертикального выравнивания в CSS будет работать только с тегами (X)HTML с атрибутами valign, но в CSS также есть отображение.
Атрибут может имитировать <table>, поэтому мы можем использовать этот атрибут, чтобы <div> имитировал <table> и использовал вертикальное выравнивание. Обратите внимание, что display:table и
Как использовать display:table-cell, первый должен быть установлен в родительском элементе, а второй должен быть установлен в дочернем элементе, поэтому нам нужно добавить еще один элемент <div> для текста, который необходимо позиционировать:
div#wrap {
высота: 400 пикселей;
дисплей: стол;
}
div#content {
вертикальное выравнивание: по середине;
дисплей: таблица-ячейка;
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
ширина: 760 пикселей;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<title> Вертикальное центрирование многострочного текста</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
тело {размер шрифта: 12 пикселей; семейство шрифтов: tahoma;}
div#wrap {
высота: 400 пикселей;
дисплей: стол;
}
div#content {
вертикальное выравнивание: по середине;
дисплей: таблица-ячейка;
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
ширина: 760 пикселей;
}
</стиль>
</голова>
<тело>
<div id="обертка">
<div id="content"><pre>Теперь мы хотим центрировать этот текст по вертикали! Webjx.Com
div#wrap {
высота: 400 пикселей;
дисплей: стол;
}
div#content {
вертикальное выравнивание: по середине;
дисплей: таблица-ячейка;
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
ширина: 760 пикселей;
}
</pre></div>
</div>
</тело>
</html>
Этот метод был бы идеальным, но, к сожалению, Internet Explorer 6 неправильно понимает display:table и display:table-cell, поэтому этот метод используется в
Он недействителен в Internet Explorer 6 и более ранних версиях. Ну, это угнетает! Однако у нас есть другие способы 4. Решение в Internet Explorer.
В Internet Explorer 6 и более ранних версиях имеется ошибка при расчете высоты. Если после размещения родительского элемента в Internet Explorer 6 вы затем разместите дочерний элемент
При выполнении процентных вычислений основа расчета, по-видимому, наследуется (если позиционируемое значение является абсолютным значением, проблем нет, но основа расчета с использованием процентов больше не будет базой элемента).
height, а высота позиционирования наследуется от родительского элемента). Например, у нас есть следующий фрагмент кода (X)HTML:
<div id="обертка">
<div id="подобертка">
<div id="содержание">
</div>
</div>
</div>
Если мы выполним абсолютное позиционирование на subwrap, то контент также унаследует этот атрибут, хотя он не будет отображаться сразу на странице, если контент будет позиционироваться дальше.
Когда строки расположены относительно друг друга, используемое вами соотношение 100% больше не будет исходной высотой содержимого. Например, если мы установим позицию подзавертки на 40%, если мы хотим сделать контент
Если край перекрывается с обтеканием, необходимо установить top:-80%, а если мы установим top:50% для subwrap, мы должны использовать 100%, чтобы вернуть содержимое в исходное положение;
, но что, если мы также установим содержание на 50%? Тогда это точно вертикально по центру. Итак, мы можем использовать этот метод для достижения вертикального центрирования в Internet Explorer 6:
div#wrap {
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
ширина: 760 пикселей;
высота: 400 пикселей;
положение: родственник;
}
div#subwrap {
позиция: абсолютная;
граница: 1 пиксель, сплошной #000;
верх:50%;
}
div#content {
граница: 1 пиксель, сплошной #000;
положение: родственник;
верх: -50%;
}
Конечно, этот код будет работать только в браузерах с проблемами вычислений, таких как Internet Exlorer 6. (Но я не понимаю. Я проверил много статей и не знаю, может это из-за
Они одинаковые или по каким-то причинам многие не хотят объяснять принцип работы этого бага в Internet Exlporer 6. У меня лишь поверхностное понимание и нужно его изучить дальше)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<title> Вертикальное центрирование многострочного текста</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
тело {размер шрифта: 12 пикселей; семейство шрифтов: tahoma;}
div#wrap {
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
ширина: 760 пикселей;
высота: 400 пикселей;
положение: родственник;
}
div#subwrap {
позиция: абсолютная;
верх:50%;
}
div#content {
положение: родственник;
верх: -50%;
}
</стиль>
</голова>
<тело>
<div id="обертка">
<div id="подобертка">
<div id="content"><pre>Теперь мы хотим центрировать этот текст по вертикали!
div#wrap {
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
ширина: 760 пикселей;
высота: 500 пикселей;
положение: родственник;
}
div#subwrap {
позиция: абсолютная;
граница: 1 пиксель, сплошной #000;
верх:50%;
}
div#content {
граница: 1 пиксель, сплошной #000;
положение: родственник;
верх: -50%;
</pre>
</div>
</div>
</div>
</тело>
</html>
5. Идеальное решение
Тогда мы сможем получить идеальное решение, объединив два вышеуказанных метода, но для этого необходимы знания CSS-хака. Чтобы использовать CSS Hack для различения браузеров, вы можете
Пожалуйста, обратитесь к этому «Простому хаку CSS: дифференцируйте IE6, IE7, IE8, Firefox, Opera»:
div#wrap {
дисплей: стол;
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
ширина: 760 пикселей;
высота: 400 пикселей;
_позиция: относительно;
переполнение: скрыто;
}
div#subwrap {
вертикальное выравнивание: по середине;
дисплей: таблица-ячейка;
_позиция: абсолютная;
_топ:50%;
}
div#content {
_позиция: относительно;
_top:-50%;
}
На этом этапе создается идеальное центрирующее решение.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<title> Вертикальное центрирование многострочного текста</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
тело {размер шрифта: 12 пикселей; семейство шрифтов: tahoma;}
div#wrap {
дисплей: стол;
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
ширина: 760 пикселей;
высота: 400 пикселей;
_позиция: относительно;
переполнение: скрыто;
}
div#subwrap {
вертикальное выравнивание: по середине;
дисплей: таблица-ячейка;
_позиция: абсолютная;
_топ:50%;
}
div#content {
_позиция: относительно;
_top:-50%;
}
</стиль>
</голова>
<тело>
<div id="обертка">
<div id="подобертка">
<div id="content"><pre>Теперь мы хотим центрировать этот текст по вертикали!
div#wrap {
граница: 1 пиксель, сплошной #FF0099;
цвет фона: #FFCCFF;
ширина: 760 пикселей;
высота: 500 пикселей;
положение: родственник;
}
div#subwrap {
позиция: абсолютная;
граница: 1 пиксель, сплошной #000;
верх:50%;
}
div#content {
граница: 1 пиксель, сплошной #000;
положение: родственник;
верх: -50%;
</pre>
</div>
</div>
</div>
</тело>
</html>
PS Значение вертикального центрирования по вертикальному выравниванию — среднее, а значение горизонтального центрирования по центру — по центру. Хотя они оба центрированы, ключевые слова разные.