1

Доброго времени суток! Столкнулся с банальной проблемой , но решения не могу найти. Обращаюсь к вам за помощью. Выпадающее меню пункты которого содержат ссылки. Текст ссылки большой, есть несколько пробелов(прим код). Так захотело руководство и поменять ничего почти нельзя. Для переноса white-space: normal;

a.inlink {
  display: block;
  height: 40px;
  font: bold 14px/17px arial, sans-serif;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  vertical-align: middle;
  white-space: normal;
  background:red;
}
<ul class="navigation">
  <a class="main" href="/novice/newcomer.php">Для новичков</a>
  <a class="inlink" href="/novice/newcomer.php">Обращения руководства к новичку</a>
  <a class="inlink" href="/novice/corp_codex.php">Корпоративный кодекс</a>
  <a class="inlink" href="/novice/adaptation.php">Процедура Адаптации</a>
  <a class="inlink" href="/novice/structure.php">Программы нематериального вознаграждения</a>
  <a class="inlink" href="/novice/information.php">Полезная информация для 1-го рабочего дня</a>
  <a class="inlink" href="/novice/structure.php">Организационна структура</a>
  <a class="inlink" href="/novice/Infrastructure.php">Телефонный справочник</a>
  <a class="inlink" href="/novice/structure.php">Кто поможет?</a>
</ul>

имеет высоту 40 примерно 3 строки текста. Если в ссылке одна строка , то она отображается вверху текста ссылки. Если 2 строки , то вверху и середине. Надо что бы независимо от строк текст отображался по середине.

2
  • Десять раз перечитал не понял ничего о чем вопрос...
    – Air
    23 янв 2018 в 7:20
  • текст ссылки может быть в одну, две и три строки в зависимости от названия. нужно что этот текст был по центру и все 23 янв 2018 в 7:28

2 ответа 2

2

Обращаю внимание, что <a><span> должно быть написано без пробельных символов.

a {
  display: block;
  line-height: 1.2;
  height: 3.6em;
  text-align: center;
}

a:before {
  content: "";
  height: 100%;
}

a:before, span {
  display: inline-block;
  vertical-align: middle;
}

a {
  max-width: 11em;
  outline: 1px dotted red;
  margin: .5em auto;
}
<a><span>Короткая</span></a>
<a><span>Займёт 2 строки... 2 строки!</span></a>
<a><span>Ну и длинная на 3 строки... 3 строки... 3 строки!</span></a>

1
  • Все работает! Спасибо! 23 янв 2018 в 8:38
0

a {
  display: flex;
  line-height: 1.2;
  height: 3.6em;
  justify-content: center;
  align-items: center;
  text-align: center;

  max-width: 11em;
  outline: 1px dotted red;
  margin: .5em auto;
}
<a>Короткая</a>
<a>Займёт 2 строки... 2 строки!</a>
<a>Ну и длинная на 3 строки... 3 строки... 3 строки!</a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.