В эпоху компоновки таблиц нет необходимости слишком много думать о вертикальном центрировании. В ячейках по умолчанию используется вертикальное центрирование. Одна строка текста центрируется по вертикали, а три строки текста также будут центрироваться по вертикали. Выполните макет веб-страницы CSS, чтобы изменить форму. По умолчанию текст располагается в верхней части контейнера.
Как показано ниже:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <голова> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #МрДжин { ширина: 500 пикселей; высота: 200 пикселей; граница: 1 пиксель, сплошной #03c; выравнивание текста: по центру; } </стиль> </голова> <тело> <div id="MrJin"><a href="http://www.52CSS.com/">Веб-дизайн CSS</a></div> </тело> </html> |
Как в этом случае центрировать текст по вертикали? Разделил на три ситуации:
1. Если это одна строка текста, вы можете использовать межстрочный интервал, чтобы решить проблему.
Мы добавляем к нему определение межстрочного интервала, чтобы получить эффект вертикального центрирования одной строки текста.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <голова> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #МрДжин { ширина: 500 пикселей; высота: 200 пикселей; граница: 1 пиксель, сплошной #03c; выравнивание текста: по центру; высота строки: 200 пикселей; } </стиль> </голова> <тело> <div id="MrJin"><a href="http://www.52CSS.com/">Веб-дизайн CSS </a></div> </тело> </html> |
2. Если это многострочный текст, родительский контейнер не имеет фиксированной высоты.
Мы можем использовать дополнение, чтобы решить проблему.
Установите для заполнения контейнера то же фиксированное значение, и высота контейнера будет увеличиваться по мере увеличения содержимого.
Используйте это для вертикального центрирования многострочного текста.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <голова> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.52CSS.com</title> <style type="text/css"> #МрДжин { ширина: 500 пикселей; отступ: 50 пикселей 0; граница: 1 пиксель, сплошной #03c; выравнивание текста: по центру; } </стиль> </голова> <тело> <div id="MrJin"><p><a href="http://www.52CSS.com/">Веб-дизайн на CSS </p><p>Мы стремимся обеспечить поддержку китайских веб-сайтов! </a></p></div> </тело> </html> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <голова> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #МрДжин { ширина: 500 пикселей; отступ: 50 пикселей 0; граница: 1 пиксель, сплошной #03c; выравнивание текста: по центру; } </стиль> </голова> <тело> <div id="MrJin"><a href="http://www.52CSS.com/"> <p>Веб-дизайн CSS</p> <p>Китайский сайт для веб-мастеров</p> <p>Мы стремимся обеспечить поддержку китайских веб-сайтов! </p> </a></div> </тело> </html> |