Не работает vertical-align: middle

@Blok1 · Регистрация: 24.02.2014

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

CSS
1
2
3
4
5
.top-nav {
    vertical-align: middle;
    background-color:#036172;
    height: 60px;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
<header>
      <div class="uphead"></div>
      <nav class="top-nav">
        <ul>
          <li>Домой</li>
          <li>Портфолио</li>
          <li>Контакты</li>
          <li>О нас</li>
        </ul>
      </nav>
    </header>

ul не выравнивается по центру... Пробовал и inline-block. Подскажите, в чем дело?

@Xteda · 03.04.2015, 22:12

Читаем...

@Blok1 · 03.04.2015, 22:27 **[ТС]**

Xteda, я же сказал, что пробовал и инлайн блок)

@Xteda · 03.04.2015, 22:38

Это все что вы там прочитали? Вся статья про inline-block? А вот это строка - "влияет на выравнивание самого элемента, а не его содержимого". А то, что с блочными элементами не работает это свойство, а в данном случае nav является блочным элементом.
Вот еще важная строка "С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов."
Чукча не читатель...

@Fedor92 · 03.04.2015, 23:08

Blok1, стесняюсь спросить, а что Вы собрались выравнивать?

@Blok1 · 04.04.2015, 01:33 **[ТС]**

Fedor92, сам список по отношению к наву)

@Fedor92 · 04.04.2015, 09:40

Blok1, так по вертикали он ровно висит выделите границы у блоков и сами посмотрите...

@Blok1 · 04.04.2015, 13:50 **[ТС]**

Fedor92, ровно по центру?)

@Fedor92 · 04.04.2015, 13:56

Ну исходя из Вашего кода:

А может у меня галюны, но я не курю...

@Serega187 · 04.04.2015, 15:23

Blok1, если тебе нужно по центру страницы или блока, то ul задай width и выровняй margin. Пример:

CSS
1
2
3
4
nav ul{
margin:0 auto;
width:200px;
}

@Blok1 · 04.04.2015, 15:56 **[ТС]**

Fedor92, ну я инлайн блок удалил) я же написал. мне горизонтально это нужно

@Serega187 · 04.04.2015, 15:59

Blok1, тебе нужно горизонтальное меню? Вот:

CSS
1
2
3
nav ul li{
display:inline-block;
}

@Fedor92 · 04.04.2015, 16:26

Blok1, хорошо, но либо мне пить надо бросать - либо...

Тема: Не работает vertical-align: middle

Вопрос: как Вы хотите выровнять свойством vertical-align: middle список горизонтально по центру, если это свойство выравнивает элементы по высоте, а не по ширине? Где логика?

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

мне горизонтально это нужно

Хотите вровнять горизонтально для ul задайте ширину + свойство margin:0 auto

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

Blok1, тебе нужно горизонтальное меню? Вот:
Код CSS
nav ul li{
display:inline-block;
}

Звезда в шоке...

Не по теме:

Мой мосх уже свистит... :) Кому что тут надо выравнивать?

@Blok1 · 04.04.2015, 17:24 **[ТС]**

Fedor92,

Ладно, я понял спасибо большое)

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

Не работает vertical-align: middle

Решение

Решение

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	03.04.2015, 22:12
	Читаем... 0

@Blok1 9 / 9 / 5 Регистрация: 24.02.2014 Сообщений: 257
	03.04.2015, 22:27 [ТС]
	Xteda, я же сказал, что пробовал и инлайн блок) 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	03.04.2015, 22:38
	Сообщение было отмечено Blok1 как решение Решение Это все что вы там прочитали? Вся статья про inline-block? А вот это строка - "влияет на выравнивание самого элемента, а не его содержимого". А то, что с блочными элементами не работает это свойство, а в данном случае nav является блочным элементом. Вот еще важная строка "С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов." Чукча не читатель... 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	03.04.2015, 23:08
	Blok1, стесняюсь спросить, а что Вы собрались выравнивать? 0

@Blok1 9 / 9 / 5 Регистрация: 24.02.2014 Сообщений: 257
	04.04.2015, 01:33 [ТС]
	Fedor92, сам список по отношению к наву) 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	04.04.2015, 09:40
	Blok1, так по вертикали он ровно висит выделите границы у блоков и сами посмотрите... 0

@Blok1 9 / 9 / 5 Регистрация: 24.02.2014 Сообщений: 257
	04.04.2015, 13:50 [ТС]
	Fedor92, ровно по центру?) 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	04.04.2015, 13:56
	Ну исходя из Вашего кода: А может у меня галюны, но я не курю... 1

@Blok1 9 / 9 / 5 Регистрация: 24.02.2014 Сообщений: 257
	04.04.2015, 15:56 [ТС]
	Fedor92, ну я инлайн блок удалил) я же написал. мне горизонтально это нужно 0

@Blok1 9 / 9 / 5 Регистрация: 24.02.2014 Сообщений: 257
	04.04.2015, 17:24 [ТС]
	Fedor92, Ладно, я понял спасибо большое) 0