Как вы центрируете текст в уценке Gitlab?

После того, как Gitlab переключил свой движок уценки на CommonMark, стало не так просто добавлять такие вещи, как настраиваемый стиль, к вашим файлам уценки.

Я использовал Gitlab в течение некоторого времени, и в течение долгого времени мне нравилось, как красиво я могу сделать свой файл README.md, имея значок по центру, заголовок и описание для моего проекта. Когда они переключили движок, все мои файлы уценки, которые полагались на такие стили, выглядели очень плохо.

Как центрировать текст в Gitlab после перехода на CommonMark?


person Simon Hyll    schedule 13.11.2018    source источник


Ответы (1)


Обновлять

Я проверил свой старый проект и заметил, что он уже отцентрирован. Оказывается, CommonMark также позволяет устанавливать align="center" на <div> тегах!

Итак, самое простое решение для центрирования в настоящее время (обратите внимание на пустую строку после открытия <div>:

<div align="center">

# This is gonna be centered!
</div>

Оригинал

Единственный html-объект CommonMark, который поддерживает центрирование (насколько мне известно), — это когда вы центрируете ячейку таблицы. Сначала вы могли бы подумать о том, чтобы просто создать таблицу, а затем использовать align="center", но таблица не будет занимать всю ширину страницы, поэтому вы получите небольшую таблицу в левой части страницы, которая не решить нашу проблему с желанием центрировать материал относительно страницы, а не таблицы.

Чтобы обойти это, мы устанавливаем ширину таблицы (не используя CSS со встроенным тегом стиля, поскольку он не поддерживается в CommonMark на момент написания статьи) на большое значение, которое будет занимать намного больше, чем общая ширина страницы. Поскольку CSS-свойство max-width: таблиц в уценке Gitlab равно 100%, это означает, что, установив смехотворно высокое значение width="", мы, по сути, устанавливаем для таблицы width: значение 100%, используя только разрешенное чистое свойство html width="".

Уценка ниже, если она помещена, например, в README.md в вашем проекте Gitlab приведет к созданию таблицы шириной 100% с центрированным изображением, заголовком и описанием. Наиболее примечательной частью является то, что мы устанавливаем width="9999" для элемента <td> в таблице.

<table align="center"><tr><td align="center" width="9999">
<img src="/icon.png" align="center" width="150" alt="Project icon">

# MyProject

Description for my awesome project
</td></tr></table>

... More content

Ниже вы можете увидеть пример того, как ваш файл README.md может выглядеть на Gitlab с использованием приведенной выше уценки. Файл README.md отрендерен в Gitlab

person Simon Hyll    schedule 13.11.2018