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


220

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

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

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


какой код вы используете для кнопки?
Дэвид Нгуен

2
Я подозреваю, что он хочет как вертикальное, так и горизонтальное центрирование. Ни одно из решений до сих пор не достигло этого. CSS не очень хорош в вертикальном центрировании = (.
mrtsherman

позвольте мне сказать, что flexbox делает этот ответ бесполезным в 2014 году. да, детка!
foreyez

Ответы:


352

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

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

Live Demo

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

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

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

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

Исходный ответ с фиксированной шириной и без флексбокса

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

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;
}

21
-1 это ужасно По сути, вы устанавливаете ширину на 100%, а затем поле на -50. Но это вызывает другие проблемы, такие как кнопка поднимается над содержащим элементом, и плохо работает с изменением размера.
CodyBugstein

3
Эй, спасибо, по крайней мере, за то, что объяснили свой голос "против" @Imray. Также обратите внимание, я сказал, что фиксированная ширина и высота не изменяются Так что изменение размера не является фактором. «В основном» я установил ширину в 100px , а не в 100%, и на полях -50px, что составляет половину. Это был довольно стандартный метод центрирования. Я жду вашего ответа, хотя :)
Loktar

1
Ваши добрые дела (извините за резкость, рад, что у вас есть чувство юмора) я имел в виду 100px. Я не знал, что вы написали «исправлено», но все же я думаю, что этот ответ не будет хорошим в большинстве ситуаций
CodyBugstein

110

Вы можете просто сделать:

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

Или вы можете сделать это так:

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

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


28

и вуаля:

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

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


11
вам также может понадобиться «display: block;»
SoluableNonagon

1
@SoluableNonagon Вот и все! «display: block» выполняет трюк с «margin: 0 auto»
Томас Лукач

8

Маржа: 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;
}


2
JQuery? Шутки в сторону?
Пранеш Рави

3
@PraneshRavi - в 2011 году в CSS было не так много опций для центрирования чего-либо по вертикали, так что да, javascript не был редкостью, если вы не знали точную высоту и ширину элемента и могли вычесть поля.
Adeneo

Вы всегда можете использовать flex для центрирования элемента как по вертикали, так и по горизонтали.
Пранеш Рави

6
@PraneshRavi - да, можно, flexbox - отличный ответ на этот вопрос, и я добавлю это, но в 2011 году не было flexbox.
Adeneo

@JGallardo - я думаю, что вы пропустили ту часть, в которой другие ответы пытаются центрировать кнопку не только по горизонтали, но и по вертикали, и что 9 лет назад не было действительно хороших вариантов сделать это только с помощью CSS
аденео


7

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

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

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

<button class="Center">Demo</button> 

6

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

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

<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, который содержит тег кнопки

стиль: "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>

введите описание изображения здесь


Вы добрый брат
Надир Хамиду

2

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

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


2

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

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

    valuepx = (wrappingDIVheight - buttonHeight)/2

Вот демонстрация JS Bin .


2

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

введите описание изображения здесь


1

Проще всего ввести его как "div", присвоив ему "margin: 0 auto", но если вы хотите, чтобы он был отцентрирован, вам нужно указать его ширину.

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

1

Опция Отзывчивый CSS для центрирования кнопки по вертикали и горизонтали, не заботясь о размере родительского элемента (используя ловушки атрибутов данных для ясности и разделения) :

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

Скрипка: https://jsfiddle.net/crrollyson/zebo1z8f/


1

Отзывчивый способ центрировать вашу кнопку в div:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

1
Этот ответ может быть улучшен путем удаления встроенных стилей и демонстрации демонстрации
JGallardo

1

Предположим, что div это #div, а кнопка #button:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

Затем вложите кнопку в div как обычно.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.