Как сверстать ссылку с текстом по центру?

Question

[Сергей Кореневский]

<a style="width: 30px; height: 120px; display: flex;" > Любой текст </a>

Как сверстать ссылку:
1.Чтобы текст был по центру если 1 или 2 строки
2.Чтобы текст который НЕ помещается обрезался только внизу.
PS под версткой имеется ввиду что HTML трогать нельзя, только использовать стили. Может стоит GRIDы использовать? в общем у блока есть только размеры, а FLEX он будет или еще как не важно. Главное чтобы стили применялись только к этому блоку

Answer 1

[Aetae]

В нормальном браузере можно просто сделать так:

a {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

А вот если нужна поддержка ослика 11, то придётся грязно костылять(чем я сейчас заниматься, конечно, не буду:)).

Comments

[Максим Морев]

11 ослик, к слову, замечательно поддерживает флексы за исключением пары странностей (которых в вашем ответе нет)

[Aetae]

Максим Морев, странностей болше чем пара, и готовые "магические фиксы" есть только для самых частых.
Например в моём ответе, при недостаточной ширине, текст будет выравнен по левой стороне, а не по центру.

[Сергей Кореневский]

Максим Морев, А почему Вы не описали что за странности? Ослик это ОПЕРА?
Я вот открыл ОПЕРУ и проверил этот код от Aetae Aetae, ВСЕ ОТЛИЧНО РАБОТАЕТ!

[Aetae]

Сергей Кореневский, ослик - это Internet Explorer. Эх, молодо-зелено...

[Максим Морев]

Ослик - это IE.
Не описал потому, что об этом никто не спрашивал. Если для человека флексы в ИЕ11 - это куча грязных костылей, он в этом убежден и начинает спорить - пусть. Меня уже давно не задевает, когда в интернете кто-то неправ :)

[Aetae]

Максим Морев, так, стоп, а вы считаете что флексы в ИЕ11 - это НЕ куча грязных костылей? Что никогда не применяете никаких магических хаков и фиксов и у вас всегда всё работает как задумано? Не баг, а фича, да?

[Максим Морев]

Aetae, для большинства кейсов всё там нормально работает, как и в других браузерах.
Запомнить несколько вещей в духе "если используется justify-content: space-between и крайний элемент стал абсолютным, то в ИЕ остальной контент отображается так, как будто бы этот элемент остался в потоке", запомнить тонкости обращения с его flex-basis - всё. Остальное если и возникает, то крайне редко, и чаще всего фиксится просто интуитивно даже без гугла.
Вы либо неправильно используете флексы, либо у нас очень разные представления о грязных костылях, либо очень разные задачи.
Меня любой вариант устроит, вы можете себе придумать любой другой вплоть до "вот дурак" и закончим на этом, мне с вами нет нужды спорить. Успехов..

[Aetae]

Самый частый хак у меня - это фикс для min-height. Но это детали.
У нас действительно очень разные представления о костылях. Для меня "чаще всего фиксится просто интуитивно" - не является каким-то оправданием. Если я в любой момент могу нарваться на странное поведение, далёкое от спецификации и должен для его исправления писать неочевидный код, специфичный для конкретного браузера, причём на каждый случай разный - это, вполне очевидно, значит что браузер требует грязых костылей.

Как эксперимент, давайте-ка "чисто интуитивно" дополните код из моего ответа так, чтобы при width: 30px он работал также как в нормальных браузерах.

[Сергей Кореневский]

Максим Морев, Описание проблемы с flex-basis в ослике очень познавательно. запомню на долго.
Но вот это кажется уже из другой задачи. так как в задаче была только ссылка и текст в ней. Не знаю как можно только первому слову без тега дать позицию абсолюта.
Это я к тому что причины для спора основательно тут нет, так как изначально вопрос обсуждался о ссылке и вложенном в него текст. А Вы привели решение и пример для другого случая (очень кстати) и сказали что спорить с нашим решением не будите.
Но в целом спасибо Вам огромное. за дополненный ответ для разных вариантов и комбинаций. Пример очень полезный оказался также.

[Максим Морев]

Сергей Кореневский, c position: absolute - это не к вашей задаче, это меня тут пытаются убедить (а я не убеждаюсь) в том, что пару вещей запомнить - задача непосильная для современного фронтендера, а дописать min-width: 100% к элементу - это грязный костыль.
Грязный костыль - это делать тянущийся во все стороны блок со скруглёнными углами и картиночной рамкой в IE6 - это вот я помню, это да, грязные костыли. А проблемы ИЕ11 со флексами - это просто небольшое неудобство. Но восприятие сильно зависит от "насмотренности". У меня, видимо, больше, поэтому проблема мне кажется меньше. :)

[Aetae]

Максим Морев, при чём тут min-width, куда его вы хотите дописать? Если речь шла о min-height, то он то как раз с флексом в ie не работает, если не задан height, что часто неприемлемо.

12 из 17, и это далеко не всё, а только то что имеет решение. Если хочется ещё - можно залезть в issues.

[Сергей Кореневский]

Aetae, Максим Морев, Друзья, товарищи, в крайности не будем впадать.
А можно ли вопрос темы реализовать точно таким же образом но уже через GRID?
15 января выходит Edge Chromium. Я только могу представить что после этого начнется ....
Microsoft будет насильно семимильными шагами переводить всех на новый Edge.
После чего появятся сообщества с жалабами о том что майрософт навязывает насильно свой браузер.
У IE сейчас очень плохая встроенная альтернатива в ввиде Edge. Но после 15 января вопрос встроенной альтернативы стоять не будет. Я уже пользуюсь несколько месяцев Финальной версией Edge, полет офигительный. Особенно когда открываю магазин расширений из хром и свободно устанавливаю любое расширение. (Мой Google Chrome подцепил заразу мелкую, разбираться времени не было. Я просто открыл новый Edge накатил пару тройку расширений и с тех пор ПРОБЛЕМ ВООБЩЕ НЕТ)
Теперь стало ясно, что теперь не то что IE и старый Edge уйдут, сейчас майрософт будет намеренно "уходить" другие браузеры, и этому есть очевидные основания.
.
Предположим 50%(скорей всего больше) пользователей не пользуются синхронизацией в Хроме. Именно их будет уходить майрософт на свой новый браузер.
Так в GRIDах аналогичное сделать можно?

[Aetae]

Сергей Кореневский,

А можно ли вопрос темы реализовать точно таким же образом но уже через GRID?

Можно вопрос темы реализовать точно таким же образом но уже через GRID.
Достаточно поменять inline-flex на inline-grid. Только в осле совсем работать перестанет.)

Answer 2

[Максим Морев]

Вот и появилось поколение людей, которые из ссылок будут делать гриды...
Ваша задача не решается при таких вводных никак.

Мы можем выровнять текстовый контент внутри по центру (1), но при переполнении он и останется по центру (2).

Если есть возможность добавить внутрь вложенный элемент, то задача решается (3 и 4).



---

Когда-нибудь это будет решаться так:

.flex {
  align-items: safe center;
}

Но эта штука уже два года в черновиках и движений в эту сторону нет особо.

Comments

[Сергей Кореневский]

Спасибо.
.
Но вот черт, я помню что более полгода назад я что то верстал типа меню. и вроде бы были только ссылки и текст в них. и все получалось. Я был доволен что так все просто. Может тогда Хром по другому работал. Точно знаю, но раньше TEXT-ALIGN раньше работал для одной строчки, а сейчас нужно указывать TEXT-ALIGN-LAST.
.
У Вас все хорошо работает. Замечу что стили: align-items: center; display:block; - лишние.

[Сергей Кореневский]

Вот решение от Максима:

a{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

[Максим Морев]

Сергей Кореневский, может быть, память подводит, я не помню каких-то изменений тут.
Раньше небо всегда голубее кажется, и трава зеленее :)
---
align-items лишний только в том варианте, где есть вложенный элемент, я универсально для всего писал, это же минимальный пример.
А указывать margin без display: block... Ну работает, конечно, потому что флексы... Но менее очевидно, как по мне.
Напомню на всякий случай интересующимся, что для инлайновых элементов margin-top и margin-bottom - не применяется. Флекс-элементы - отдельный случай, конечно. Оставлю, пусть будет, хуже от него не становится :)