Выравнивание текста внутри вертикального гибкого элемента игнорируется - PullRequest
Новая
       67

Выравнивание текста внутри вертикального гибкого элемента игнорируется

0 голосов
/ 04 марта 2019

Решения для подобных вопросов, похоже, не работают для моего случая, который более конкретен, чем те, поэтому я не думаю, что это дублирующий вопрос.

I 'Я пытаюсь выровнять текст внутри некоторых элементов flex, но свойство text-align полностью игнорируется.Проверьте этот jsfiddle ;рассматриваемые элементы - те, что справа, пронумерованы от 1 до 3. Комментарий для вашего удобства помечает относительное правило в CSS.

Обратите внимание , что мне нужно, чтобы элементы былиflex или же они потеряют вертикальное выравнивание и / или свою текущую форму.

Мой желаемый результат состоит в том, что три элемента разделяют все доступное вертикальное пространство поровну между собой, занимают всю доступную ширину и имеюттекст в центральном положении каждого блока, как по вертикали, так и по горизонтали.

Я бы не хотел, чтобы заставлял задавать нужную позицию с помощью отступов или подобных артефактов, и я также хотел бы избежать добавлениябольше тегов в HTML, если это вообще возможно.

1 Ответ

0 голосов
/ 04 марта 2019

Вы выравниваете элементы в навигационной панели, используя align-items:center, но это только в одном направлении.Чтобы сделать это в другом направлении, добавьте justify-content: center.

И вы можете избавиться от text-align: center Взгляните на это: 

body {
    color: rgb(240, 240, 240);
    font-family: sans-serif;

    background-color: rgb(150, 150, 150);
}

#content-bar {
    background-color: rgb(0, 0, 0);

    position: fixed;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    min-width: 100%;
    height: 60%;
    left: 0;
}

#content-bar > * {
    padding: 1em;
}

#content-bar > main {
    overflow: auto;
}

#content-bar > nav {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;

    min-width: 15%;
}

#content-bar > nav > a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}
<body>
  <div id="content-bar">
    <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate in arcu id ullamcorper. Pellentesque luctus ut felis vitae tempor. In dui neque, condimentum sit amet diam id, tristique interdum ipsum. In semper nisi leo, at consequat sem interdum feugiat. Proin vestibulum, turpis in tempus pellentesque, enim libero auctor libero, sit amet ultrices est felis sit amet nisl. Mauris vel mi mi. Suspendisse eleifend laoreet mi a congue. Fusce non libero in velit sodales pharetra nec in nisl. Phasellus elementum a odio eu sodales. Nunc luctus, est non pellentesque tristique, nibh mi pulvinar tellus, ut tincidunt dolor eros at leo. Donec varius dolor eget quam aliquet varius. In at iaculis est. Proin at purus sed ligula tincidunt ullamcorper sit amet a elit. Duis mollis lacinia mi, non aliquam arcu pulvinar ac. Aenean quis imperdiet lorem.</p>
    </main>

    <nav>
      <a href="#">Element 1</a>
      <a href="#">Element 2</a>
      <a href="#">Element 3</a>
    </nav>
  </div>
</body>
...