попытка выровнять 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>
8 70
html back-button alignment 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: 0 auto; для горизонтального центрирования, но margin: auto; отказался работать для вертикального центрирования... до сих пор! Но на самом деле абсолютное центрирование требует только объявленной высоты и этих стилей:

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