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

Я пытаюсь создать 3 кнопки, которые находятся рядом в верхней части моей страницы. Когда страница становится меньше, они должны складываться. Пока все в порядке. У меня есть пуговицы. Я пытаюсь установить высоту кнопок до 50px max при полноэкранном режиме. Проблема в том, что когда я устанавливаю высоту, текст в моих кнопках не центрируется вертикально. Вот то, что я до сих пор:Выравнивание текста по вертикали внутри ссылки с использованием flexbox

.flx-search { 
    display:flex; 
    flex-direction: row; 
    flex-wrap:wrap; 
    justify-content: center; 
    align-items:center; 


    width:1060px; 
    color:#ffffff; 
} 

.flx-search-item { 
    flex-grow:1; 
    text-align:center; 
    display:block; 
    flex: 0 0 350px; 
    height:50px; 
} 

<div style="background-color:#34495e;display:flex; justify-content:center;"> 
    <div class="flx-search"> 
    <a class="flx-search-item">Search Our Catalog</a> 
    <a class="flx-search-item">View Patron Record</a> 
    <a class="flx-search-item">Register for Programs</a> 
    </div> 
</div>

JSfiddle: https://jsfiddle.net/c60t2r2k/

Спасибо за вашу помощь заранее!

источник

2016-01-20 Damien

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

Иными словами, примените display: flex к .flx-search-item.

.flx-search-item { 
    display: flex;   /* new */ 
    align-items: center;  /* new */ 
    justify-content: center; /* new */ 

    flex-grow: 1; 
    text-align: center; 
    /* display: block; <-- remove this */ 
    flex: 0 0 350px; 
    height: 50px; 
    }

Revised Demo

display: block Удалить или перекроет display: flex.

Кроме того, в настоящее время flex-grow: 1 переопределены flex: 0 0 350px, который является сокращением для flex-grow, flex-shrink, flex-basis.

Если вы хотите flex-grow: 1, избавитесь от этой линии и просто используйте flex: 1 0 350px.

источник

2016-01-20 17:36:40

Я применил его, но 1 вещь. Есть ли способ сделать шкалу высот по мере того, как страница сжимается? – Damien

Для масштабирования да. Вы можете использовать [** viewport units **] (https://css-tricks.com/viewport-sized-typography/). Для зависания вы нацелились на неверного родителя: [** DEMO **] (https://jsfiddle.net/c60t2r2k/3/) (горизонтальное масштабирование окна для масштабирования эффекта, зависание работает). –

Большое спасибо, мне просто интересно, есть ли способ сделать это без медиа-запросов. – Damien

Просто добавьте высоту линии: 50px; to .flx-search-item.

EDIT (образец с @media запроса):

.flx-search-item { 
    text-align: center; 
    flex: 0 0 350px; 
    height: 50px; 
    line-height: 50px; 
} 

@media (max-width:1065px) { 
    .flx-search-item 
    { 
     flex: 0 0 700px; 
    } 
} 
@media (max-width:710px) { 
    .flx-search-item 
    { 
     flex: 0 0 350px; 
    } 
}

источник

2016-01-20 17:30:48

проблема с этим, когда она сжимается, высота остается на 50 пикселей вместо сокращения и текст становится нецентрированным по вертикали – Damien

Хорошо. На самом деле, кажется, что все три кнопки центрированы по вертикали, но отображаются на 2 линиях, когда доступное пространство находится между 700 и 1050 пикселей. Вы можете использовать запрос @media для решения этого вопроса. –

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

ответ

Смежные вопросы