Разместить текст по центру

@aynnv · Регистрация: 26.10.2011

Студворк — интернет-сервис помощи студентам

Как сделать, чтобы текст был ровно по центру и по горизонтали, и по вертикали?

HTML5
1
<a href="http://a" class="link">Текст</a>

CSS
1
2
3
4
5
6
7
.link{
    width:200px;
    height:200px;
    background-color:#000;
    display:block;
    position:absolute;
    color:#FFF;}

@galaid · 26.10.2011, 18:51

Возможно, стоит прибегнуть к такому способу:

HTML5
1
2
3
4
5
6
7
<table align="center">
<tr>
<td valign="middle">
ТЕКСТ
</td>
</tr>
</table>

@Daredevi1 · 26.10.2011, 20:04

Добавь еще text-align: center; и line-height: 200px;

@aynnv · 26.10.2011, 20:35 **[ТС]**

galaid, не работает

@galaid · 26.10.2011, 20:37

Сообщение от aynnv

galaid, не работает

Этот работает:

HTML5
1
2
3
4
5
6
7
<table align="center" width="100%" height="100%">
<tr>
<td valign="middle">
ТЕКСТ
</td>
</tr>
</table>

@aynnv · 27.10.2011, 15:32 **[ТС]**

Я возможно некорректно задал вопрос. Мне нужно, чтобы "Текст" был по центру черного квадрата, выравнивание по горизонтали я сделал, но выравнивание по вертикали не получается (пробовал vertical-align:middle, не получилось).

Для вашего удобства привожу полный код страницы:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.link{
        width:200px;
        height:200px;
        background-color:#000;
        display:block;
        color:#FFF;
        text-align:center;}
</style>
</head>
<body>
<a href="http://a" class="link">Текст</a>
</body>
</html>

@Daredevi1 · 27.10.2011, 16:44

Я же писал:

Сообщение от Daredevi1

Добавь еще text-align: center; и line-height: 200px;

@aynnv · 27.10.2011, 17:26 **[ТС]**

Daredevi1, Большое спасибо! То, что нужно!

@xGADYAx · 28.10.2011, 21:05

Сообщение от aynnv

Код CSS
1
2
3
4
5
6
7
.link{
width:200px;
height:200px;
background-color:#000;
display:block;
position:absolute;
color:#FFF;}

Если указана ширина элемента, то можно по горизонтали отцентрировать с помощью свойства, margin: 0 auto; но для этого нужно указать, position: relative.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	26.10.2011, 20:04
	Добавь еще text-align: center; и line-height: 200px; 1

@aynnv 0 / 0 / 0 Регистрация: 26.10.2011 Сообщений: 19
	26.10.2011, 20:35 [ТС]
	galaid, не работает 0

@aynnv 0 / 0 / 0 Регистрация: 26.10.2011 Сообщений: 19
	27.10.2011, 17:26 [ТС]
	Daredevi1, Большое спасибо! То, что нужно! 0