Temiks

Выровнять содержимое ссылки по вертикали

Recommended Posts

Здравствуйте. Как можно выровнять содержимое ссылки по вертикали?

Задача сделать вот это:

s_1454161610_3549253_34f2ceceb5.png
 

Есть изображение, если навести на изображение появляется ссылка с текстом, текст находится по центру, а ссылка расстягивается на всю ширину и высоту изображения.
Изображения могут быть разной высоты, по этому padding думаю не подойдет :/ 
--
как такое можно сделать? 

Share this post


Link to post
Share on other sites

 

Одно замечание: здесь нужен text-align, а не justify-content :-)

Уверен? 

 

 

Ну да :-)

 

justify-content выравнивает не текст, а сам флекс элемент. Текст по-прежнему выровнен слева.

 

Просто флекс элемент по умолчанию занимает ширину своего контента. Поэтому здесь все нормально, он меньше своего родителя. А вот так видно.

Share this post


Link to post
Share on other sites

Выравнивает.

 

http://codepen.io/anon/pen/XXxOxz

 

Кстати, я ошибся, тут все-таки нужен и justify-content. Здесь создается анонимный флекс элемент, но он flex-level box, а не block-level box, поэтому text-align не сработает, если он не на всю ширину.

В общем, тут нужно оба правила прописывать.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,330
    Total Members
    3,128
    Most Online
    TimofejUS
    Newest Member
    TimofejUS
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.