Как сделать кнопку по центру в css
Вопрос по vertical-alignment, html, alignment, button – пытаясь выровнять кнопку HTML в центре моей страницы
Я пытаюсь выровнять кнопку HTML точно по центру страницы, независимо от используемого браузера. Он либо плавает влево, оставаясь в вертикальном центре, либо где-то на странице, как в верхней части страницы и т. Д.
Я хочу, чтобы он был как вертикально, так и горизонтально, центрировался. Вот что я написал прямо сейчас:
Вот ваше решение:JsFiddle
По сути, поместите вашу кнопку в div с центрированным текстом:
Со следующими стилями:
Есть много способов снять кожу с кошки, и это только один.
Вот решение, как спросили
text-align на родителя div простым использованием margin:auto; display:block;
HTML
CSS
SEE IT IN ACTION: CodePen
попробуйте это довольно просто, и вы не можете внести изменения в ваш файл .css, это должно работать
Поместите его в другой div, используйте CSS, чтобы переместить кнопку в середину:
Для меня это работало с использованием flexbox.
Добавьте класс css вокруг родительского элемента div / с помощью:
и для использования кнопки:
Вы должны использовать родительский div, в противном случае кнопка не “знает”. что такое середина страницы / элемента.
Есть несколько способов исправить это. ПФБ два из них –
1st Way using position: fixed – положение: фиксированное; позиции относительно окна просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. Добавление левого и верхнего значения к 50% поместит его в середину экрана.
2nd Way using margin: auto маржа: 0 авто; для горизонтального центрирования, но на полях: авто; отказался работать для вертикального центрирования & # x2026; до сих пор! Но на самом деле абсолютное центрирование требует только объявленной высоты и следующих стилей:
Я действительно недавно взял display: table придать вещам фиксированный размер, например включить margin: 0 auto работать. Сделал мою жизнь намного проще. Вам просто нужно пройти мимо того факта, что «таблица» отображение не означает html таблицы.
Это особенно полезно для адаптивного дизайна, где вещи становятся просто волосатыми и сумасшедшими, 50% оставляют это и -50%, которые просто становятся неуправляемыми.
Кроме того, если у вас есть две кнопки и вы хотите, чтобы они имели одинаковую ширину, вам даже не нужно знать размер каждой кнопки, чтобы они были одинаковой ширины – потому что таблица волшебным образом свернет их для вас.
(это также работает, если они встроены, и вы хотите расположить две кнопки по центру – попробуйте сделать это с процентами!).
Выравнивание по центру в CSS
Выравнивание элементов по центру в CSS – это одна из самых популярных причин чтобы пожаловаться на CSS. «Почему всё так сложно?» – возмущаются они. Мне кажется, что проблема заключается не в том что это трудно сделать, а в том что способов для выравнивания элементов по центру очень много и бывает достаточно сложно выбрать из них подходящий.
Давайте выстроим все возможные решения в виде древовидной схемы и будем надеяться, что это упростит нашу задачу.
Итак, мне нужно выравнять элемент по центру.
Горизонтальное выравнивание
Выравнивание по центру строкового или строково-* элемента
Выравнивать по центру строковые элементы внутри блочного родительского элемента можно достаточно просто:
See the Pen Centering Inline Elements by Chris Coyier (@chriscoyier) on CodePen.
Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.
Выравнивание по центру блочного элемента
Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:
See the Pen Centering Single Block Level Element by Chris Coyier (@chriscoyier) on CodePen.
Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.
Обратите внимание, что вы не сможете обтекать элемент выравненный по центру таким способом. Однако и для этого есть трюк.
Выравнивание по центру нескольких блочных элементов
Если есть два или более блочных элементов, которые вам нужно выравнять горизонтально по центру в пределах одной строки, то возможно вам лучше изменить их тип отображения. Ниже приведён пример изменения их типа отображения на inline-block и пример с Flexbox:
See the Pen Centering Row of Blocks by Chris Coyier (@chriscoyier) on CodePen.
Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:
See the Pen Centering Blocks on Top of Each Other by Chris Coyier (@chriscoyier) on CodePen.
Вертикальное выравнивание
Вертикальное выравнивание по центру в CSS немного сложнее.
Выравнивание по центру строкового или строково-* элемента
Выравнивание элемента с одной строкой
Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .
See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.
Если для вас по каким-то причинам padding – это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство line-height равным значению высоты элемента.
See the Pen Centering a line with line-height by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание многострочного элемента
Одинаковые отступы сверху и снизу могут создать эффект выравнивания по центру и для многострочных элементов, но если это не сработает, то возможно что элемент в котором находится текст является ячейкой таблицы, либо такое его поведение явно задано со помощью CSS. В данном свойство vertical-align обрабатывает это, в отличии от того что оно обычно обрабатывает выравнивание элементов внутри строки.
See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.
Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.
See the Pen Vertical Center Multi Lines of Text with Flexbox by Chris Coyier (@chriscoyier) on CodePen.
Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота ( px , % , и другие), вот почему здесь у контейнера задана высота.
Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.
See the Pen Ghost Centering Multi Line Text by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание по центру блочного элемента
Выравнивание элемента с известной высотой
Довольно часто мы не можем знать высоту, по многим причинам: если изменяется ширина, текст может форматироваться и изменять высоту. Разная стилизация текста может изменять высоту. Разный размер шрифта может изменить высоту. Элементы с фиксированным соотношением сторон, такие как изображения, могут изменять высоту при изменении собственных размеров и т.д.
Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:
See the Pen Center Block with Fixed Height by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание элемента с неизвестной высотой
Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:
See the Pen Center Block with Unknown Height by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание элемента с помощью Flexbox
Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.
See the Pen Center Block with Unknown Height with Flexbox by Chris Coyier (@chriscoyier) on CodePen.
Горизонтальное и вертикальное выравнивание
Вы можете комбинировать представленные выше техники для того чтобы получить идеально выравненные по центру элементы. Но обычно их можно разделить на 4 группы:
Выравнивание элемента с фиксированной шириной и высотой
Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:
See the Pen Center Block with Fixed Height and Width by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание элемента с неизвестной шириной и высотой
Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:
See the Pen Center Block with Unknown Height and Width by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание элемента с помощью Flexbox
Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:
See the Pen Center Block with Unknown Height and Width with Flexbox by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание элемента с помощью CSS Grid
Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:
See the Pen Centering with Grid by Chris Coyier (@chriscoyier) on CodePen.
Вывод
Теперь вы можете всё что угодно выравнять по центру в CSS.
lsreg’s IT blog
Выравнивание по центру в CSS
Нередко верстальщику необходимо разместить элемент по центру страницы. На первый взгляд, эта задача простая, но на практике возможны сложности, которые можно исправить различными способами. Каждый из них имеет достоинства и недостатки. Предположим, необходимо разместить блок с картинкой в центре.
Отрицательный отступ
Применяем к блоку свойства top и left, которые выставляются на 50%. Для этого способа необходимо заранее знать размеры блока, половина от которого является значением отрицательного отступа.
Предположим, у нас есть HTML.
CSS в таком случае будет следующим.
Автоматический отступ
Этот способ напоминает предыдущий. Но здесь необходимо выставить атрибуты top, right, bottom и left на 0, а величину отступа выставить на auto. Огромное преимущество метода – наличие рабочих скроллбаров родительского элемента. Но недостаток способа такой же, как и у предыдущего – необходимость жестко задавать размеры блока.
Код выглядит следующим образом.
Таблица
В этом коде необходимо выделить несколько элементов: родителя, ячейку родителя и блок. Первому необходимо задать табличное отображение, второй – ячейку таблицы, а блоку присвоить модель строчного блока.
Ячейке (элементу с классом inner) присваиваем параметры text-align: center и vertical-align: middle. Недостаток способа – не работают скроллбары, да и вообще эмуляция таблицы для выравнивания считается нехорошим тоном в кругу веб-разработчиков.
Пример кода с применением этого метода.
Как выровнять текст по центру?
Чтобы выровнять текст по центру, необходимо присвоить ему свойство text-align со значением center.
Пример кода.
Универсальный способ выравнивания по центру
Предположим, нам надо выровнять кнопку по центру в CSS. Для этого необходимо создать див, в центре которого размещается кнопка, которую мы собираемся ставить посередине, а потом воспользоваться типом отображения flex. Код будет приблизительно таким (описание в самом коде).
Таким способом можно выравнивать абсолютно любые элементы на веб-странице: формы, текст, картинки, меню, заголовки вертикально и горизонтально. Логика универсальна: создается родительский див, в который необходимый элемент загружается в качестве дочернего. В родительском диве прописываются свойства display: flex, align-items: center, justify-content: center, height: 100%. В дочернем прописывается ширина, отступ и другие свойства.
Единственный недостаток способа – он поддерживается только самыми новыми версиями браузеров. Часть свойств можно реализовать через вендорные префиксы (например, -webkit–) для увеличения совместимости со старыми версиями.
Источники:
https://vike.io/ru/29631/
https://tuhub.ru/posts/centering-css-complete-guide
https://lsreg.ru/vyravnivanie-po-centru-v-css/
