Использовать поле слева и справа с процентным соотношением. для получения более подробной информации см. следующий учебник:
http://www.
w3.org/Style/Examples/007/center.en.html
Чтобы центрировать что-то в CSS, убедитесь, что родительский элемент имеет позицию : относительный , а элемент, который вы хотите центрировать, позицию: абсолютный и левый: 50% и margin-left: -width/2 . Это основная идея центрировать элементы по горизонтали. Для центрирования по вертикали вы можете использовать ту же технику, но с top: 50% и margin-top: -height/2 , или, если это просто текст, установите line-height равной высоте элемента контейнера. .
отображение: встроенный блок;
выравнивание текста: по центру;
поле слева: 50%;
поле справа: 50%;
переполнение: видимое;
1
Попробуйте добавить ширину к вашему элементу следующим образом:
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как центрировать ссылки в CSS?
by Manoj Kumar
Ссылки являются неотъемлемой частью веб-сайта, поскольку они позволяют посетителям перемещаться между различными страницами, получать доступ к важным ресурсам веб-сайта и помогают улучшить работу пользователей. общий опыт.
В HTML ссылка представлена тегом привязки . Он использует атрибут href для указания места назначения ссылки.
Когда вы добавляете ссылку на свою HTML-страницу, она по умолчанию выравнивается по левой стороне своего контейнера. Но много раз мы сталкиваемся с ситуациями, когда нам нужно выровнять его по центру.
В этой статье я покажу вам, почему метод обычного центрирования не работает со ссылками и как мы можем это исправить.
Итак, без лишних слов, приступим.
Почему text-align: center; не работает со ссылками?
В CSS свойство text-align используется для горизонтального выравнивания текста элемента HTML. Он может выравнивать текст по левому, правому краю или по центру в зависимости от переданного ему значения. Например, если вы установите text-align to center , в идеале он должен выровнять текст элемента по его центру.
Однако при применении text-align: center; на тег привязки , по умолчанию не работает.
Это потому, что является встроенным элементом HTML. Встроенный элемент не начинается с новой строки и занимает ровно столько ширины, сколько необходимо для размещения его содержимого. Изображения, кнопки, поля ввода, ссылки, промежутки и т. д. — все это встроенные элементы.
Из-за их встроенной природы вы не можете напрямую центрировать их текст с помощью text-align: center; недвижимость. Тем не менее, мы можем очень легко решить эту проблему. Давайте посмотрим на это в следующем разделе.
Центрирование Ссылки с text-align: center; Свойство
Как уже говорилось выше, свойство text-align: center; по умолчанию не работает со ссылками, поскольку они являются встроенными по своей природе.
Таким образом, чтобы выровнять по центру ссылку со свойством text-align, мы должны сначала обернуть ее блочным элементом, таким как div или параграф, а затем применить выравнивание текста: по центру; на самой обертке.
Применение text-align: center; в div автоматически перетащит его содержимое в центр.
<дел>
org">
Эта ссылка расположена по центру
Добавьте CSS:
div{
выравнивание текста: по центру; /* Выравнивание содержимого по центру*/
граница: 2px сплошной малиновый;
отступ: 10 пикселей;
}
Вывод:
Как видно из вышеприведенного вывода, ссылка горизонтально центрирована внутри контейнера div, потому что мы установили text-align свойство по center .
Вы также можете запустить приведенный выше код в нашем онлайн-редакторе HTML, чтобы просмотреть изменения в реальном времени:
Пример:
div{
выравнивание текста: по центру; /* Выравнивание содержимого по центру*/
граница: 2px сплошной малиновый;
отступ: 10 пикселей;
}
Попробуйте сейчас
Решение 2:
Если вы не хотите размещать ссылку в каком-либо родительском контейнере и все же хотите отцентрировать ее по горизонтали, то сначала вам нужно сделать ссылку блочным элементом. а затем применить выравнивание текста: по центру; на нем.
Чтобы ссылка вела себя как блочный элемент, вы можете просто установить для свойства display значение block , а затем использовать text-align: center; для горизонтального центрирования текста:
a{
дисплей: блок; /* Сделать блочный тип */
выравнивание текста: по центру; /* Выравнивание текста по центру*/
}
Вывод:
При использовании этого метода вы должны помнить, что каждая ссылка будет начинаться с новой строки, так как теперь она ведет себя как блочный элемент.
Поэтому вам лучше пойти с первым подходом.
Центрирование ссылок с помощью Flexbox
Flexbox — это модель макета в CSS, позволяющая создавать гибкие и адаптивные макеты для веб-страниц.
Вы также можете использовать его для выравнивания элементов как по горизонтали, так и по вертикали.
Чтобы выровнять ссылки по центру с помощью модели flexbox, вы должны сначала поместить ссылку в контейнер, такой как div, а затем сделать его flex-контейнером, установив для свойства display значение flex .
Теперь, чтобы центрировать ссылку по горизонтали внутри контейнера flex, вы можете установить для свойства justify-content значение center .
<дел>
org">Эта ссылка располагается по центру
Добавьте CSS:
дел {
дисплей: гибкий; /* Создание гибкого контейнера */
выравнивание содержимого: по центру; /* Центрируем по горизонтали */
граница: 2 пикселя пунктирная малиновая;
отступ: 10 пикселей;
}
Вывод:
Центрирование ссылок по вертикали и горизонтали
Если вы также хотите центрировать ссылку по вертикали внутри ее контейнера, вы можете использовать свойство align-items .
Свойство align-items выравнивает flex-элементы по вертикали внутри их flex-контейнера.
Чтобы центрировать ссылку вертикально внутри контейнера flex, вы можете просто установить его align-items property to center :
org">Эта ссылка расположена по центру
Добавьте CSS:
div{
дисплей: гибкий; /* Создание гибкого контейнера */
выравнивание содержимого: по центру; /* Центрируем по горизонтали */
выравнивание элементов: по центру; /* Центрировать по вертикали */
высота: 120 пикселей;
граница: 2 пикселя пунктирная малиновая;
}
Вывод:
Центрирование ссылок с помощью CSS Grids
Как и в случае с flexbox, вы также можете использовать сетки CSS для центрирования ссылок как по горизонтали, так и по вертикали.
Сетки в CSS используются для создания гибких двухмерных макетов.
Чтобы выровнять ссылку по центру с помощью CSS-сеток, вы должны сначала поместить ее в контейнер, такой как div, а затем сделать его контейнером сетки, установив для свойства display значение grid , как мы сделали для flexbox.
Теперь вы можете использовать justify-content и свойства align-items для горизонтального и вертикального выравнивания ссылок внутри контейнера сетки.
div{
отображение: сетка; /* Создание контейнера Grid */
выравнивание содержимого: по центру; /* Центрируем по горизонтали */
выравнивание элементов: по центру; /* Центрировать по вертикали */
высота: 120 пикселей;
граница: 2px пунктирная малиновая;
}
Вывод:
Центрирующие звенья с полем Авто
Поле : авто; — очень популярный метод выравнивания элементов по центру по горизонтали в CSS.
Но этот метод работает только с элементами блочного уровня, такими как div, абзацы, списки и т. д.
Итак, если вы хотите выровнять ссылку по центру с margin: auto; , вы должны сначала сделать его блочным элементом, установив для свойства display значение block , а затем применить поле: авто; на нем.
Следующее, что вам нужно сделать, это установить его ширину на некоторое фиксированное значение, чтобы браузер мог автоматически поместить его точно в центр своего контейнера.
Он может выравнивать текст по левому, правому краю или по центру в зависимости от переданного ему значения. Например, если вы установите 
Тем не менее, мы можем очень легко решить эту проблему. Давайте посмотрим на это в следующем разделе.
org">
а затем применить 
org">Эта ссылка располагается по центру
org">Эта ссылка расположена по центру
