it-swarm.com.ru

пытаясь выровнять кнопку 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> 
76
user1455116

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

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

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

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

.wrapper {
    text-align: center;
}

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

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

117
Mohamad

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

Например:

HTML

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

CSS

button{
  margin:auto;
  display:block;
}

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

47
maudulus

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

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

style
{
   display: table;
   margin: 0 auto
}

JsFiddle

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

enter image description here

JsFiddle

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

15
Simon_Weaver

попробуйте это довольно просто и вы не можете вносить изменения в ваш файл .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>
4
Rick Roy

Вот решение, как спросили 

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

4
joy oares

Для меня это работало с использованием flexbox. 

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

.parent {
    display: flex;
}

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

.button {
    justify-content: center;
}

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

2
Roy

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

1-й путь с использованием положения: фиксированный - положение: фиксированный; позиции относительно окна просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. Добавление левого и верхнего значения к 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;
}
1
Maddy

Поместите его в другой 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

1
Tim Withers

Сделайте все родительские элементы шириной 100% и высотой 100% и используйте display: table; и display: 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>
0
Ritesh Kumar