Как центрировать кнопку внутри элемента? - PullRequest
Новая
       35

Как центрировать кнопку внутри элемента?

179 голосов
/ 27 сентября 2011

У меня есть div, ширина которого составляет 100%.

Я бы хотел разместить в нем кнопку, как я могу это сделать? 

<div style="width:100%; height:100%">
     <button type="button">hello</button>
</div>

Ответы [ 14 ]

283 голосов
/ 27 сентября 2011

Обновленный ответ

Обновление, потому что я заметил, что это активный ответ, однако Flexbox теперь будет правильным подходом.

Демонстрация в реальном времени

Вертикальное и горизонтальное выравнивание. 

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Просто по горизонтали (если основная ось сгиба горизонтальна, что по умолчанию) 

#wrapper {
  display: flex;
  justify-content: center;
}

Оригинальный ответ с фиксированной шириной и без flexbox

Если исходный плакат требует выравнивания по вертикали и центру, его довольно просто для фиксированной ширины и высоты кнопки, попробуйте следующее

Live Demo

CSS 

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

для горизонтального выравнивания используйте либо 

button{
    margin: 0 auto;
}

или 

div{
    text-align:center;
}
97 голосов
/ 06 ноября 2014

Вы могли бы просто сделать 

<div style="text-align: center;">
   <input type="button" value="button">
</div>

Или ты мог бы сделать это 

<div>
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

Первый будет выравнивать по центру все внутри div. Другой будет выравнивать по центру только кнопку.

19 голосов
/ 27 сентября 2011

et voila: 

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
}

Обновление : если OP ищет горизонтальный и вертикальный центр, этот ответ сделает это для фиксированной ширины / высотыэлемент.

9 голосов
/ 27 сентября 2011

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

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

Обновление ... пять лет спустя , можно использовать flexbox на родительском элементе DIV, чтобы легко центрировать кнопку как по горизонтали, так и по вертикали.

Включая все префиксы браузера, для лучшей поддержки 

div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -moz-box-align    : center;
  -ms-flex-align    : center;
  -webkit-align-items : center;
  align-items : center ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}


#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

#container div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>
6 голосов
/ 08 декабря 2015

Использование flexbox 

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

И затем добавление класса к вашей кнопке. 

<button class="Center">Demo</button>
6 голосов
/ 27 сентября 2011

С предоставленной ограниченной детализацией я приму наиболее простую ситуацию и скажу, что вы можете использовать text-align: center:

http://jsfiddle.net/pMxty/

4 голосов
/ 12 сентября 2018

Вы должны принять это просто здесь:

сначала у вас есть начальная позиция текста или кнопки: 

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

Путем добавления этой строки кода CSS к тегу h2 или к тегу div , который содержит тег кнопки

style: "text-align: center;"

Окончательно Код результата будет: 

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

enter image description here

2 голосов
/ 13 июля 2018

Очень простой ответ, который будет применяться в большинстве случаев, - просто установить поле 0 auto и установить отображение block.Вы можете видеть, как я центрировал свою кнопку в моей демонстрации на CodePen

enter image description here

2 голосов
/ 22 сентября 2016

Для центрирования <button type = "button"> по вертикали и по горизонтали в пределах <div>, ширина которого вычисляется динамически, как в вашем случае, это то, что нужно сделать:

  1. Установите text-align: center; для обтекания<div>: кнопка будет центрироваться при каждом изменении размера <div> (точнее, окна)

  2. Для вертикального выравнивания вам необходимо установить margin: valuepx; для кнопки.Это правило о том, как рассчитать valuepx:

    valuepx = (wrappingDIVheight - buttonHeight)/2

Вот пример JS Bin demo .

2 голосов
/ 22 ноября 2013

Наткнулся на это и подумал, что я оставлю решение, которое также использовал, которое использует line-height и text-align: center для вертикальной и горизонтальной центровки:

Нажмите здесьдля работы JSFiddle

Страница:
...