Попытка выровнять html-кнопку в центре моей страницы

Я пытаюсь выровнять кнопку HTML точно по центру страницы, независимо от используемого браузера. Он либо плавает влево, оставаясь в вертикальном центре, либо где-то на странице, как в верхней части страницы и т.д.

Я хочу, чтобы он был как вертикально, так и горизонтально, центрировался. Вот что я написал прямо сейчас:

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button>

ОТВЕТЫ

Ответ 1

Вот ваше решение: JsFiddle

По сути, поместите вашу кнопку в div с центрированным текстом:

<div class="wrapper">
    <button class="button">Button</button>
</div>

Со следующими стилями:

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

Есть много способов снять кожу с кошки, и это только один.

Ответ 2

Вы можете text-align кнопку без использования text-align на родительском div, просто используя margin:auto; display:block; margin:auto; display:block;

Например:

HTML

<div>
  <button>Submit</button>
</div>

CSS

button {
  margin:auto;
  display:block;
}

СМОТРИТЕ В ДЕЙСТВИИ: CodePen

Ответ 3

Я действительно недавно использовал display: table чтобы придать вещам фиксированный размер, например, чтобы включить margin: 0 auto для работы. Сделал мою жизнь намного проще. Вам просто нужно обойти тот факт, что "табличное" отображение не означает табличный HTML.

Это особенно полезно для адаптивного дизайна, где вещи становятся просто волосатыми и сумасшедшими, 50% оставили это и -50%, которые просто становятся неуправляемыми.

style
{
   display: table;
   margin: 0 auto
}

JsFiddle

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

enter image description here

JsFiddle

(это также работает, если они встроены, и вы хотите расположить две кнопки по центру - попробуйте сделать это с процентами!).

Ответ 4

попробуйте это, это довольно просто и даст вам возможность внести изменения в ваш .css файл, это должно работать

<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>

Ответ 5

Вот решение по запросу

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>

Ответ 6

Есть несколько способов исправить это. ПФБ два из них -

Первый путь с использованием позиции: фиксированная - позиция: фиксированная; позиции относительно окна просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. Добавление левого и верхнего значения к 50% поместит его в середину экрана.

 button {
   position: fixed;
   left: 50%;
   top:50%;
 }

2-й способ с использованием поля: auto -margin: 0 auto; для горизонтального центрирования, но на полях: авто; отказался работать для вертикальной центровки... до сих пор! Но на самом деле абсолютное центрирование требует только объявленной высоты и следующих стилей:

button {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
}

Ответ 7

Для меня это работало с помощью flexbox.

Добавьте класс css вокруг родительского div/элемента с помощью:

.parent {
    display: flex;
}

и для использования кнопки:

.button {
    justify-content: center;
}

Вы должны использовать родительский div, иначе кнопка не "знает", что такое середина страницы/элемента.

Ответ 8

Поместите его в другой div, используйте CSS, чтобы переместить кнопку в середину:

<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;">
    <button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname</button> 
</div>​

Вот пример: JsFiddle

Ответ 9

Сделайте все родительские элементы шириной 100% и высотой 100% и используйте display: table; и отобразите: table-cell ;, проверьте рабочий образец.

Рабочая версия Git

<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">

<div style="display: table-cell; vertical-align: middle; text-align: center;">
    <button type="button" style="text-align: center;" class="btn btn-info">
       Discover More
    </button>
</div>

</body>
</html>