Выравнивание текста в блоке по вертикали

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

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

Может быть кому-то покажется этот вопрос тупым или глупым. Но мне больше некуда обратиться за помощью. Я уже прогуглил так что туда не посылать

У меня после шапки есть строчка (блок). Тут же в теме я кинул скрин.

Мне надо выровнять текст по вертикали, чтобы он был по центру вертикально. Иконки выровнять получилось с помощью margin, а вот текст никак не получается. Желательно с помощью Css.

vertical-align:middle тоже не помогло

Вот мой html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<td align="center" height="35" width="100%" style="background:url('http://.../dizing/4polo3.jpg') repeat-x;">
 <div style="overflow:hidden">
    <img class="siso" src="http://.../dizing/ico-home.png">
      <a class="s" href="http://.../">Главная</a>
    <img class="sido" src="http://.../dizing/ico-map.png">
      <a class="s" href="http://.../sitemap.html">Карта сайта</a>
    <img class="sido" src="http://.../dizing/ico-save.png">
      <a class="s" href="http://.../index/faq/0-5">Как скачивать софт</a>
    <img class="sido" src="http://.../dizing/ico-gb.png">
      <a class="s" href=".../gb">Гостевая книга</a>
    <img class="sido" src="http://.../dizing/ico-upload.png">
      <a class="s" href=".../index/faq_quot_kak_dobavit_soft_na_sajt_quot/0-9">FAQ "Как добавить софт на сайт"</a>
    <img class="sido" src="http://.../icon/actions.png">
      <a class="s" rel="sidebar" onclick="window.external.AddFavorite(location.href,'Line][age'); return false;" href="http://.../" title="Бесплатный Софт. Качай у Нас!">Добавить сайт в закладки</a>
</div>
</td>

Ну и css

CSS
1
2
3
4
5
6
7
8
9
.s {font-weight:normal;}
a.s:link {text-decoration:none; color:#616161}
a.s:active {text-decoration:none; color:#616161}
a.s:visited {text-decoration:none; color:#616161}
a.s:hover {text-decoration:none; color:#343434}
 
.siso { margin:0px 0 5px 7px}
.sido { margin:0px 0 5px 12px}
a.s {font-family:Arial,Sans-Serif; margin:0px 0 5px 5px; padding: 0 0 0px 0px; margin-bottom: .6em; font-size: 11pt; float:center; vertical-align:middle}

Vovan-VE · 19.06.2011, 06:06

CSS
1
.sido {vertical-align:middle;}

@nemyzhik · 14.03.2013, 13:53

Делайте так! Добавляйте padding-top:10px; и убирайте высоту блока на height:; на 10 px !

@joralink · 16.03.2013, 18:07

А может быть есть смысл для <td> установить valign="middle" и для каждого изображения align="middle"?

@Kiruxa · 16.03.2013, 20:47

Попробуйте применить свойство line-height к тегу с текстом.

@mcmimik · 12.11.2013, 05:05

Чтобы выровнять текст по вертикали и горизонтали, используйте display:flex; для родительского и margin:auto; для дочернего элемента, подробно описано тут: http://pepelsbey.net/2013/05/flexbox-gotcha/

Пример:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
    display:flex; 
} 
p { 
    margin:auto; 
    font-size: 2em; 
} 
</style> 
</head> 
<body> 
    <p>Hello, World.</p> 
</body> 
</html>

@Denis91 · 12.11.2013, 11:45

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

vertical-align:middle тоже не помогло

Сообщение от Vovan-VE

.sido {vertical-align:middle;}

Что-то не понял как оно сначала не помогло, а потом помогло

@Taatshi · 12.11.2013, 11:59

Не по теме:

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

Что-то не понял как оно сначала не помогло, а потом помогло

так это же Vovan-VE - не может не помочь :pardon:

Новые блоги и статьи Все статьи Все блоги /
Контроль корректности заполнения дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@nemyzhik 0 / 0 / 0 Регистрация: 10.03.2013 Сообщений: 4
	14.03.2013, 13:53
	Делайте так! Добавляйте padding-top:10px; и убирайте высоту блока на height:; на 10 px ! 0

@joralink 65 / 65 / 12 Регистрация: 07.03.2013 Сообщений: 198
	16.03.2013, 18:07
	А может быть есть смысл для <td> установить valign="middle" и для каждого изображения align="middle"? 0

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	16.03.2013, 20:47
	Попробуйте применить свойство line-height к тегу с текстом. 0