Горизонтальная центровка с использованием CSS значения fit-content.

Перевод статьи:  Horisontal centering using CSS fit-content value.
Автор:  Catalin Rosu.

Однажды я прочел отличную статью о горизонтальном выравнивании, написанную Роджером Йоханссоном (Roger Johansson), в которой он детально рассматривает так называемый shrinkwrap эффект, то есть ужатие ширины элемента по его контенту. В сущности, его пост посвящен одной из самых распространенных проблем, с которыми вы зачастую сталкиваетесь на практике, а точнее проблемой центровки навигационного меню, содержащего плавающие элементы, ширина которых не задана явно.

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

Изображение

Просто еще один возможный способ.

Недавно я обнаружил, что оба браузера Firefox и Chrome поддерживают внутренние (intrinsic) значения ширины и что одним из наиболее привлекательных значений свойства width является fit-content. К тому же, в этой статье я покажу вам, насколько эффективным может оказаться именно это значение (fit-content) в поиске решения упомянутой выше проблемы.

Вполне очевидно, что также как в случае с таблицами, когда для выравнивания по горизонтали вам необходимо установить значения левого и правого полей равным auto, использование декларации width: fit-content сообщает браузеру, что ширина форматируемого таким образом элемента определяется его контентом, а не автоматически занимает все доступное пространство, предоставляемое содержащим блоком.

Подходящий пример.

И теперь, используя предложенный Роджером Йоханссоном пример разметки:

<div class="navbar center">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About us</a></li>
<li><a href="/">Our products</a></li>
<li><a href="/">Customer support</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>

и следующий фрагмент CSS кода:

.center ul{
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}

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

Минимальная поддержка браузеров, но многообещающее будущее.

Несмотря на достаточно слабую поддержку браузерами (*на момент публикации оригинала статьи только Chrome и Firefox; последнюю информацию можно найти здесь), на этот подход все же стоит обратить внимание и рассмотреть как альтернативный вариант для использования в будущем. Взять, к примеру, модуль CSS Flexbox, изначально его поддержка тоже была минимальной, но сейчас она стремительно расширяется.

Так же имейте в виду, что значение fit-content не является окончательной рекомендацией к использованию, а относится к категории экспериментальных. Это свойство описано в редакционной версии W3C стандарта, а значит, в будущем спецификация может измениться.

Один комментарий на Горизонтальная центровка с использованием CSS значения fit-content.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *