Использовать поле слева и справа с процентным соотношением. для получения более подробной информации см. следующий учебник:
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
Псевдоэлементы отлично подходят, когда вы хотите добавить то, что сделает вашу страницу или приложение ярче. Однако бывают случаи, когда вы хотите центрировать те, которые находятся до или после псевдоэлементов, и использование процентов не делает этого. Использование старой доброй маржи: автоматический трюк или использование flexbox тоже не совсем работает. В этом кратком посте я собираюсь объяснить, как вы можете идеально оформить свой псевдоэлемент и быть уверенным, что он будет работать независимо от разрешения, размера шрифта или чего-то еще.
Допустим, мы хотим создать кнопку, подобную этой ниже. Он чем-то похож на глаз.
Очевидно, нам нужно сначала спроектировать внешний круг. Давайте сделаем что-нибудь большое и возьмем 250 пикселей:
ширина: 250 пикселей;
высота: 250 пикселей;
Мы хотим, чтобы он был круглым, поэтому давайте также добавим 100% радиуса границы:
радиус границы: 100%;
Белый фон:
цвет фона: белый;
Позже мы будем позиционировать псевдоэлемент абсолютно, поэтому нам нужно, чтобы элемент-контейнер располагался относительно:
положение: относительное;
Тонкая рамка:
стиль границы: сплошная;
ширина границы: 1px;
цвет границы: #e8eef6;
Когда дело доходит до границ, я обычно стараюсь избегать сокращенных обозначений, потому что мне кажется легче понять, когда свойства охватывают разные строки.
Кроме того, тонкая тень блока, бессовестно созданная с помощью Chrome Dev Tools:
box-shadow: 0 0 6px 1px #e8eef6;
И добавим типичный запас:
поле: 12 пикселей;
Таким образом, с этими правилами вы получите что-то вроде этого:
Мы закончили с легкой частью, мы успешно спроектировали внешний круг. Теперь к внутреннему.
Давайте установим размер внутреннего круга в 50 пикселей и используем вариант синего цвета для его фона:
Теперь, прежде чем делать что-либо еще, если мы проверим результат, мы получим это чудовище:
Внутренний круг, естественно, находится в верхнем левом углу элемента-контейнера. Нам нужно его переместить, поэтому воспользуемся свойствами top и left:
left: 50%;
верх: 50%;
Что ж. . Это на самом деле лучше, чем раньше, но мы далеки от желаемого конечного результата. Но почему это происходит, спросите вы? Мы использовали проценты правильно? 50% сверху и 50% слева должно быть достаточно, чтобы разместить этот псевдоэлемент прямо в центре его контейнера. Что ж, это может звучать разумно, но это не так, если вы знаете внутренние детали работы CSS. Видите ли, это будет работать нормально, если top: 50% означает «Поместить центр псевдоэлемента на 50% сверху», а left 50% означает «Поместить центр псевдоэлемента на 50% слева».
Но на самом деле top: 50% означает: «Поместите псевдоэлемент на 50% сверху», а left: 50% означает «Поместите крайнюю левую точку псевдоэлемента на 50% слева». Так работает CSS. Вот почему внутренний круг был помещен в верхний левый угол элемента-контейнера до того, как мы его переместили. Элементы размещаются слева направо и сверху вниз.
Решением этой проблемы будет перемещение центра внутреннего круга в центр внешнего круга. Мы можем сделать это, используя отрицательные поля.
Однако бывают случаи, когда вы хотите центрировать те, которые находятся до или после псевдоэлементов, и использование процентов не делает этого. Использование старой доброй маржи: автоматический трюк или использование flexbox тоже не совсем работает. В этом кратком посте я собираюсь объяснить, как вы можете идеально оформить свой псевдоэлемент и быть уверенным, что он будет работать независимо от разрешения, размера шрифта или чего-то еще.
. Это на самом деле лучше, чем раньше, но мы далеки от желаемого конечного результата. Но почему это происходит, спросите вы? Мы использовали проценты правильно? 50% сверху и 50% слева должно быть достаточно, чтобы разместить этот псевдоэлемент прямо в центре его контейнера. Что ж, это может звучать разумно, но это не так, если вы знаете внутренние детали работы CSS. Видите ли, это будет работать нормально, если top: 50% означает «Поместить центр псевдоэлемента на 50% сверху», а left 50% означает «Поместить центр псевдоэлемента на 50% слева».