Блог

Главная - Вопросы по программированию - Выравнивание растянутого гибкого трубопровода по вертикали без использования отступов и полей

Выравнивание растянутого гибкого трубопровода по вертикали без использования отступов и полей

#css #bootstrap-4 #flexbox

#css #bootstrap-4 #flexbox

Вопрос:

Я использую flexbox с align-items-stretch, поскольку мне нужно, чтобы границы достигали как сверху, так и снизу. Не разрешая использование полей и отступов, как я могу добиться выравнивания текста по вертикали внутри гибкого трубопровода, не сталкиваясь с каким-либо конфликтом свойств?

Я попытался использовать align-items-stretch и внутри ul li добавленного align-middle класса, но, похоже, он ничего не делает, видя, что свойство конфликтует.

 <div class="navbar-collapse collapse align-items-stretch" id="navbarCollapse" style="">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item active">Home</li>
        <li class="nav-item">About Us</li>
        <li class="nav-item ">Services</li>
    </ul>
</div>

Этот текущий код позволяет растянуть мои границы, но текст внутри flexbox не может быть централизован.

Комментарии:

1. Вы можете добавить тень окна для отображения границы вокруг элементов навигации, например: .navbar-nav li { box-shadow: 0px 0px 1px 0px red; }

2. использование li.nav-item { display: flex; align-items: center; }

Ответ №1:

Как насчет добавления line-height со значением, равным высоте .nav-item ?

Пример: 

 .navbar-nav {
  display: flex;
  justify-content: center;
}

.nav-item {
  border: 1px solid pink;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}  
 <div class="navbar-collapse collapse align-items-stretch" id="navbarCollapse" style="">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item active">Home</li>
        <li class="nav-item">About Us</li>
        <li class="nav-item ">Services</li>
    </ul>
</div>

И вот еще что:https://jsfiddle.net/jutvsw26 /

Для более подробного ответа не могли бы вы добавить некоторый CSS, который вы используете в настоящее время.