Как мне центрировать h4, который включает как обычный текст, так и ссылки, не теряя пробелов между ними?
У меня есть этот тег <h4>:
<h4>
A <a href = "https://openjdk.java.net/">Java</a> and <a href = "https://kotl.in">Kotlin</a> coder.
</h4>
к которому применен этот CSS (унаследованный от body):
body {
font-family: jetbrains-mono;
background-color: #444;
color: #EEEEEE;
font-size: 18px;
max-width: 650px;
line-height: 1.2;
display: grid;
align-items: center;
margin: auto auto;
}
использование только align-content: center дает тот же результат.
Проблема в том, что если я использую flexbox для центрирования текста вместо сетки, например:
display: flex;
align-items: center;
justify-content: center;
Как я могу это исправить? полный файл html находится здесь: https://github.com/TheOnlyTails/theonlytails.com/blob/main/index.html и полный файл css находится здесь: https://github.com/TheOnlyTails/theonlytails.com/blob/main/style.css
Ответы 1
Чтобы он стал столбцом, вам понадобится свойство flex-direction: column;. Добавьте его в контейнер, в который вы добавили свойство display: flex, вот так:
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
Надеюсь, это решит вашу проблему.
Не могли бы вы отправить скриншот?
Конечно: imgur.com/a/autvsAO
Поскольку они являются заголовками, вы можете уменьшить их поля в CSS. Между прочим, я думаю, что у них одинаковое расстояние между ними, но похоже, что их больше из-за того, что они центрированы.
Вроде работает, но теперь между строками намного больше места.