Вертикальное выравнивание пунктов меню на списке ul

@eugenex · Регистрация: 19.08.2014

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

Код меню:

HTML5
1
2
3
4
5
6
7
8
9
<nav class="art-nav">
   <div class="art-nav-inner">
      <div style="position:absolute;left:-840px;right:-840px;top:-41px;height:40px;background: url('/../images/main_menu_bg.png') repeat-x;display:table-row;">
         <div style="display:table-cell;width:840px;"></div>
         <div style="display:table-cell;width:4%;"></div>
         <div style="display:table-cell;">
         <ul class="art-hmenu">
            <li class="item-153 deeper parent"><a href="/tury">Туры</a>
            ....

Слово "Туры" должно быть расположено по вертикали в середине этого блока:

HTML5
1
<div style="position:absolute;left:-840px;right:-840px;top:-41px;height:40px;background: url('/../images/main_menu_bg.png') repeat-x;display:table-row;">

Стандартный вариант с vertical-align:middle не работает:

HTML5
1
2
         <div style="display:table-cell;vertical-align:middle;">
         <ul class="art-hmenu">

Сейчас текст смещён ближе к нижней границе дива.

@chomovva · 22.08.2015, 18:14

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

Стандартный вариант с vertical-align:middle не работает:

по идее это должно быть в свойствах пункта li, тогда работать будет.
Я бы для пунктов задал:

CSS
1
2
height: 40px;
line-height: 40px;

@eugenex · 22.08.2015, 19:26 **[ТС]**

HTML5
1
<li class="item-153 deeper parent" style="height:40px !importent;line-height:40px !importent;"><a href="/tury">ТУРЫ</a>

Нет, и так не работает, даже с !importent

vertical-align:middle в стилях li тоже не помог.

@Resume · 22.08.2015, 19:44

https://css-tricks.com/centering-in-the-unknown/
Вдруг поможет

@chomovva · 22.08.2015, 19:45

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

Нет, и так не работает, даже с !importent

!important

сбросьте весь код или ссылку на сайт.

@eugenex · 22.08.2015, 19:49 **[ТС]**

Интересный момент: если блоку с display:table-cell, в котором находится ul, задать бордер, то видно что его нижняя граница ниже чем у блока с display:table-row. И текст располагается как раз в середине блока очерченного бордером. Если для пункта задать height:30px то блок с display:table-cell оказывается в границах блока с display:table-row, но текст остается на том же уровне, то есть ближе к нижней границе.

@eugenex · 22.08.2015, 20:03 **[ТС]**

В аттаче код полностью.

@chomovva · 22.08.2015, 20:53

eugenex, всё выравновается по центру, только этого не видно. т.к. у вас

CSS
1
background: transparent url("/../images/main_menu_bg.png") repeat-x scroll 0% 0%;

этот бакгроунд высотой 33px, а высота блока 40px. либо измените фоновую картинку (подгоните её на высоту 40px), либо измените высоту блока.
я бы бекгроунд убрал полностью, т.к. это лишние байты и время на запрос к серверу.
Вместо него я сделал так:

CSS
1
2
3
background-color: #fbf7de;
border-top: 1px solid #39d7fc;
border-bottom: 1px solid #39d7fc;

Вертикальное выравнивание пунктов меню на списке ul

@eugenex · 22.08.2015, 21:05 **[ТС]**

Упс... Понял.

Новые блоги и статьи Все статьи Все блоги /
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. Пошагово создадим проект для загрузки изображения. . .

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	22.08.2015, 19:44
	https://css-tricks.com/centering-in-the-unknown/ Вдруг поможет 0

@eugenex 1 / 1 / 1 Регистрация: 19.08.2014 Сообщений: 96
	22.08.2015, 19:49 [ТС]
	Интересный момент: если блоку с display:table-cell, в котором находится ul, задать бордер, то видно что его нижняя граница ниже чем у блока с display:table-row. И текст располагается как раз в середине блока очерченного бордером. Если для пункта задать height:30px то блок с display:table-cell оказывается в границах блока с display:table-row, но текст остается на том же уровне, то есть ближе к нижней границе. 0

@eugenex 1 / 1 / 1 Регистрация: 19.08.2014 Сообщений: 96
	22.08.2015, 21:05 [ТС]
	Упс... Понял. 0