Частный случай вертикального выравнивания.

[prowoke]

Здравствуйте. Мне нужно выровнять по вертикали текст в  теге <li>. Сложность в том, что текст во-первых двухстрочный. Во вторых содержится в bootstrap меню. Вот такая структура:

<nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs">Категории</span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
                        <li class="dropdown"><a href="http://neosakura/index.php?route=product/category&amp;path=59" class="dropdown-toggle" data-toggle="dropdown">Букеты</a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
                            <ul class="list-unstyled">
                                <li><a href="http://neosakura/index.php?route=product/category&amp;path=59_68">Второй вид (3)</a></li>
                                <li><a href="http://neosakura/index.php?route=product/category&amp;path=59_67">Первый вид (1)</a></li>
                              </ul>
                          </div>
            <!--<a href="http://neosakura/index.php?route=product/category&amp;path=59" class="see-all">Показать все Букеты</a>-->
			</div>
        </li>
                                <li><a href="http://neosakura/index.php?route=product/category&amp;path=60">Горшочные изделия</a></li>
                                <li><a href="http://neosakura/index.php?route=product/category&amp;path=61">Композиции</a></li>
                                <li><a href="http://neosakura/index.php?route=product/category&amp;path=62">Корзины</a></li>
                                <li><a href="http://neosakura/index.php?route=product/category&amp;path=64">Новогодняя флористика</a></li>
                                <li><a href="http://neosakura/index.php?route=product/category&amp;path=66">Оформление мероприятий</a></li>
                                <li><a href="http://neosakura/index.php?route=product/category&amp;path=65">Свадебная флористика</a></li>
                                <li><a href="http://neosakura/index.php?route=product/category&amp;path=63">Траурная флористика</a></li>
                      </ul>
    </div>
  </nav>

 

Тема популярная, но то, что я нахожусь в сети, обычно не работает, либо не подходит. 

[MadSandwich]

Один вопрос, как нам поможет html код, без CSS, собственно того что нужно вам поправить. Я не вижу тут ни ссылки на сайт, ни созданного на подобие этого блока на другом сайте.

[prowoke]

22 часа назад, MadSandwich сказал:

Один вопрос, как нам поможет html код, без CSS, собственно того что нужно вам поправить. Я не вижу тут ни ссылки на сайт, ни созданного на подобие этого блока на другом сайте.

Ну bootstrap это. Ну а так нету какого то готового решения для этого? Задача вроде распространнёная. Ну  так, вот css:

 

#menu {
	background-color: #840d55;
	background-image: linear-gradient(to bottom, #9a176d, #840d55);
	min-height: 77px;
	box-shadow: 0 0 5px;
	border-radius: 10px;
}
#menu .nav > li {
	background-image: url(../image/liseparate.png);
	background-repeat: no-repeat;
	background-position: right 18px;
	text-transform: uppercase;
	height: 100%;
}
#menu .nav :last-child {
	background-image: none;
}
#menu .nav > li > a {
	color: #fff;
	font-size: 13px;
	height: 100%;
	background-color: transparent;
	width: 138px;
	height: 77px;
	text-align: center;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
	background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
	padding-bottom: 0;
}
#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
	background-color: #840d55;
}
#menu .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 3px 20px;
	clear: both;
	font-size: 13px;
	line-height: 20px;
	color: #333333;
	font-size: 12px;
	color: white;
}
#menu .dropdown-inner li a:hover {
	color: #FFFFFF;
}

 

 

[MadSandwich]

Я вижу решение этой проблемы только добавлением еще одного пункта в стили

.center_text_in_li {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

И само меню переделать. А именно, добавить grid. Да все у тебя через бутстрап, но этих стилей не хватит, для помощи тебе. Я дал тебе совет, если он тебе не поможет, либо давай ссылку на сайт либо построй такой же блок на этом сайте, со всеми стилями как у тебя. (вот на этом например)

[andrey7287]

Для

7 часов назад, prowoke сказал:

Ну а так нету какого то готового решения для этого?

#menu .nav > li > a {
	display: block;
	padding: 30px 0; 
}

 Примерно так. 

[prowoke]

В 7/15/2016 в 22:38, andrey7287 сказал:

Для

#menu .nav > li > a {
	display: block;
	padding: 30px 0; 
}

 Примерно так. 

Очевидно, что это явно не для случая с 2 строчками.

[Xenia Wanger]

li {
	display: table;
	height: 50px;
}

li a {
	display: table-cell;
	vertical-align: middle;
}

Вот такая вещь выравнивает по вертикали элементы. Попробуйте внедрить это в свой код.

[andrey7287]

В 27.07.2016 в 02:08, prowoke сказал:

Очевидно, что это явно не для случая с 2 строчками.

Для какого ещё случая может понадобиться выравнивание паддингами ?

[Switch74]

Есть очень хороший способ на мой взгляд, выравнивания inline элементов разной высоты в родительском элементе произвольной высоты с помощью дополнительного элемента с 0 шириной и 100% высотой - работало во всех браузерах. Ищите что-то вроде help vertical align block

PS: здесь есть данный способ https://learn.javascript.ru/css-center