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

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

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

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

8 ответов

вот ваше решение:http://jsfiddle.net/7Laf8/

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

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

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

.wrapper {
    text-align: center;
}

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

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

101

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

например:

HTML-код

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

в CSS

button{
  margin:auto;
  display:block;
}

УВИДЕТЬ ЕГО В ДЕЙСТВИИ: http://codepen.io/maudulus/pen/avBdpL

39

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

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

style
{
   display: table;
   margin: 0 auto
}

http://jsfiddle.net/Z52eR/

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

enter image description here

http://jsfiddle.net/AK674/2/

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

15

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

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>
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>
3

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

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

.parent {
    display: flex;
}

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

.button {
    justify-content: center;
}

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

2

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

вот пример:http://jsfiddle.net/U2B3x/

1

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

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

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

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

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