Выравнивания текста в css

@qu13t · Регистрация: 02.06.2010

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

не получается выровнять текст по центру относительно вертикали. пробовал padding и margin оно применяется ко всему блоку и он смещается. а текст так и остаётся привязан к топу.
Вот код html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul id="jsddm">
 <li> <a href="#">JavaScript</a>
<ul>
 <li><a href="#">Выпадающее меню</a></li>
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Ajax</a></li>
</ul>
</li>
 <li> <a href="#">Эффекты</a>
<ul>
 <li><a href="#">Slide эффект</a></li>
 <li><a href="#">Fade эффект</a></li>
</ul>
</li>
 <li><a href="#">Навигация</a></li>
 <li><a href="#">HTML/CSS</a></li>
 <li><a href="#">Помощь</a></li>
</ul>

вот CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#jsddm {
margin: 0;
padding: 0;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
font-weight:bold;
 
}
#jsddm li a {
height: 40px;
display: block;
background:  url('/diz/menugorizont.jpg');
background-repeat: repeat-x;
padding: 0px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;
}
#jsddm li a:hover {height: 40px;background: #1A4473;}
#jsddm li ul {
height: 40px;
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
height: 40px;
float: none;
display: inline;
}
#jsddm li ul li a {
height: 40px;
width: auto;
background: #161e22;
}
#jsddm li ul li a:hover {height: 40px;background: #242b2f;}

думаю javascript не понадобиться

Вот картинка меню

@qu13t · 06.03.2011, 21:29 **[ТС]**

что, никто не знает?

@NeoLord · 06.03.2011, 22:15

Используй vertical-align: middle

@Loir · 06.03.2011, 22:45

Возьми текст в теги

HTML5
1
<SPAN STYLE="vertical-aign:middle; text-aign:center;">Текст которій по ЦЕНТРУ</SPAN>

@Tatsu_real · 07.03.2011, 02:04

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

<SPAN STYLE="vertical-aign:middle; text-aign:center;">Текст которій по ЦЕНТРУ</SPAN>

L пропустил

HTML5
1
<SPAN STYLE="vertical-align:middle; text-align:center;">Текст которій по ЦЕНТРУ</SPAN>

Добавлено через 6 минут
примени свойство vertical-align:middle; к каждому LI в котором ссылки находятся, но учти что могут быть проблемы с IE6 и IE7

а зачем ты хочешь центровать по вертикали align-ом? почему просто марджином или паддингом не воспользуешься?

Добавлено через 23 минуты
вот тебе пример

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<style>
[CSS]*{
    padding: 0;
    margin: 0;
}
ul.menu{
    position: relative;
    height: 30px;
    background: silver;
    list-style: none;
    float: left;
}
ul.menu li{
    position: relative;
    float: left;
    height: 30px;
    background: grey;
    padding: 3px 12px 0 12px;
}
 
ul.menu li:hover ul.submenu{
    display: block;
}
 
ul.submenu{
    position: absolute;
    background: green;
    top: 33px;
    left: 0;
    list-style: none;
    overflow: hidden;
    display: none;
}
 
ul.submenu li{
    background: red;
    float: none;
    border-top: 1px solid black;
}[/CSS]
</style>
 
</head>
<body>
 
<ul class="menu">
 
    <li><a href="#">Link1</a>
 
        <ul class="submenu">
 
            <li class="menu"><a href="#">SubLink1</a></li>
            <li class="menu"><a href="#">SubLink2</a></li>
 
        </ul>
 
    </li>
    <li class="menu"><a href="#">Link2</a>
 
        <ul class="submenu">
 
            <li class="menu"><a href="#">SubLink1</a></li>
            <li class="menu"><a href="#">SubLink2</a></li>
            <li class="menu"><a href="#">SubLink3</a></li>
 
        </ul>
 
    </li>
    <li class="menu"><a href="#">Link3</a>
 
        <ul class="submenu">
 
            <li class="menu"><a href="#">SubLink1</a></li>
            <li class="menu"><a href="#">SubLink2</a></li>
            <li class="menu"><a href="#">SubLink3</a></li>
            <li class="menu"><a href="#">SubLink3</a></li>
 
        </ul>
 
    </li>
    <li class="menu"><a href="#">Link4</a>
 
        <ul class="submenu">
 
            <li class="menu"><a href="#">SubLink1</a></li>
            <li class="menu"><a href="#">SubLink2</a></li>
            <li class="menu"><a href="#">SubLink3</a></li>
            <li class="menu"><a href="#">SubLink3</a></li>
            <li class="menu"><a href="#">SubLink3</a></li>
 
        </ul>
 
    </li>
 
</ul>

Добавлено через 1 минуту

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

padding: 3px 12px 0 12px;

вот этот паддинг будет тебе изменять позицию ссылок твоих сверху слева и справа) и не забывай что паддинг добавляет к общей высоте блока... т.е. допустим блок у тебя 30рх ты ставишь для этого блока паддинг 5рх, в результате у тебя блок станет отображаться как блок с высотой 35рх

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия SDL 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual. . .	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 физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .

@qu13t 0 / 0 / 0 Регистрация: 02.06.2010 Сообщений: 81
	06.03.2011, 21:29 [ТС]
	что, никто не знает? 0

@NeoLord 11 / 11 / 0 Регистрация: 09.08.2010 Сообщений: 66
	06.03.2011, 22:15
	Используй vertical-align: middle 0