Div center text align center: A Basic Walkthrough of the CSS Box Model

Как центрировать текст? — поддержка

Хлоя_Юрга 30 ноября 2019 г., 12:03

#1

Markdown, похоже, не поддерживает выравнивание текста по центру, поэтому я считаю, что должен использовать html. Согласно документации, это лучше всего сделать с помощью шорткода. Поэтому я определил следующий шорткод:

 
{{.Inner}}
 

И тогда я пытаюсь использовать его следующим образом:

 {{% центр %}}
тестовое задание
*подчеркнутый тест*
{{% /центр %}}
 

В результирующем html я получаю . Я так понимаю, это потому, что по умолчанию эта функция отключена в goldmark. Поэтому я добавил в свой конфиг следующее:

 [разметка]
  [разметка.золотая метка]
    [разметка.goldmark.renderer]
      небезопасно = верно
 

Полученный HTML-код

 

тестовое задание
*подчеркнутый тест*

 

Уценка не обрабатывается (нет новых строк и выделенного текста). Согласно документации шорткода, используя % вместо < , поскольку символ шорткода должен обрабатывать уценку. Так что не знаю, что я делаю не так.

Будем признательны за любую помощь! Спасибо.

каушалмоди 30 ноября 2019 г., 12:26

#2

Хлоя_Юрга:

{{% center %}} тест выделенный тест {{% /center %}}

Я не пробовал это в шорткоде, но я сделал что-то подобное, используя HTML-тег div, обернутый вокруг Markdown, и используя версию Hugo Goldmark… Попробуйте поместить пустую строку выше и ниже Markdown, который вы пытаетесь обернуть, и может использовать 9Тег 0049 div

вместо тега p .

2 лайков

Chloe_Jurga 30 ноября 2019 г. , 12:42

#3

Спасибо @kaushalmodi, это работает.

Вот шорткод:

 

{{.Внутренний}}

 

, который выводит

 

тест
выделенный тест

 

каушалмоди 30 ноября 2019 г., 12:50

#4

Хлоя_Юрга:

, который выводит

Круто! Но также покажите контент Markdown, который вы набрали, чтобы получить его, чтобы кто-то другой, наткнувшийся на то же самое, мог его использовать.

Хлоя_Юрга 30 ноября 2019 г., 16:46

#5

Дано в исходном посте. Я сохранил его таким же.

Рудольфшмидт 17 февраля 2020 г., 19:15

#6

Попробуйте отобразить поддерживаемый HTML-файл. Вы можете использовать pugjs в сочетании с Hugo, что я лично тоже делаю.

кароли 9 декабря 2022 г., 19:07

#7

Я думаю, что после того, как небезопасная настройка была отключена по умолчанию, лучше всего создать шорткод, который вызывается как что-то, что получает необработанную строку ( {{< ) и используйте markdownify внутри. Таким образом, шорткод будет выглядеть так:

 {{ .Inner | уценка }}
 

Затем вы вызываете шорткод следующим образом, используя {{< тегов уценки:

 {{< text-center >}}
Вещи для `обработки` в *центре*. 
тестирование **123**
какой-то другой текст
{{< /текстовый центр >}}
 

Для этого не требуется, чтобы для параметра

unsafe было установлено значение true.

Мехди_Саада 13 декабря 2022 г., 11:17

#8

Или проще, если вы используете только встроенные элементы (текст и обычные изображения):
поместите это в css:

 .center {
выравнивание текста: по центру;
}
 

и использовать атрибуты классов в абзацах:

 blablabla
{.центр}
 

Чем меньше нам нужны шорткоды, тем более портативный, чище и легче пишется код имхо.

2 лайка

вдохновленный Интернетом 13 декабря 2022 г., 23:27

#9

УСС.

Это буквально то, для чего он был разработан.

причал разделить эту тему 18 декабря 2022 г., 18:50

#10

Сообщение было разделено на новую тему: Помощь с атрибутами уценки

CSS: свойство text-align

---

В этом руководстве по CSS объясняется, как использовать свойство CSS под названием text-align с синтаксисом и примерами.

Описание

Свойство CSS text-align определяет, как текст элемента выравнивается внутри элемента его родительского блока.

Синтаксис

Синтаксис свойства CSS text-align:

 text-align: value; 

Параметры или аргументы

значение

Выравнивание текста. Это может быть одно из следующих:

Значение	Описание
слева	Текст выровнен по левому краю div { text-align: left; }
справа	Текст выровнен по правому краю div { text-align: right; }
центр	Текст центрирован div { text-align: center; }
выравнивание	Текст выровнен по ширине (т. е. выровнен по левому и правому краям абзаца) div { выравнивание текста: по ширине; }
начало	Если направление слева направо, текст будет выровнен по левому краю. Если направление справа налево, текст будет выровнен по правому краю. div { выравнивание текста: начало; }
конец	Если направление слева направо, текст будет выровнен по правому краю. Если направление справа налево, текст будет выровнен по левому краю. div { выравнивание текста: конец; }
наследовать	Элемент унаследует выравнивание текста от своего родительского элемента div { text-align: inherit; }

Примечание

• Свойство text-align выравнивает только встроенное содержимое (т.е. текст) элемента внутри его родительского блочного элемента.
• Свойство text-align не выравнивает сам блочный элемент, а только встроенное содержимое.

Совместимость с браузерами

Свойство CSS text-align имеет базовую поддержку со следующими браузерами:

• Хром
• Андроид
• Firefox (Геккон)
• Firefox Mobile (Геккон)
• Internet Explorer (IE)
• Интернет-телефон
• Опера
• Опера Мобайл
• Сафари (веб-кит)
• Сафари Мобильный

Пример

Мы обсудим свойство text-align ниже, исследуя примеры того, как использовать это свойство в CSS.

Использование Center

Давайте рассмотрим пример выравнивания текста CSS, где мы центрируем текст.

 div { text-align: center; } 

В этом примере выравнивания текста CSS мы центрировали текст в теге