Eu tenho uma div que é largura é 100%.
Gostaria de centralizar um botão dentro dele, como posso fazer isso?
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>
Eu tenho uma div que é largura é 100%.
Gostaria de centralizar um botão dentro dele, como posso fazer isso?
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>
Respostas:
Resposta atualizada
Atualizando porque notei que é uma resposta ativa, no entanto, o Flexbox seria a abordagem correta agora.
Alinhamento vertical e horizontal.
#wrapper {
display: flex;
align-items: center;
justify-content: center;
}
Apenas horizontal (contanto que o eixo flexível principal seja horizontal, o padrão)
#wrapper {
display: flex;
justify-content: center;
}
Resposta original usando uma largura fixa e sem flexbox
Se o pôster original desejar alinhamento vertical e central, é bastante fácil para largura e altura fixas do botão, tente o seguinte
CSS
button{
height:20px;
width:100px;
margin: -20px -50px;
position:relative;
top:50%;
left:50%;
}
apenas para alinhamento horizontal, use
button{
margin: 0 auto;
}
ou
div{
text-align:center;
}
Você poderia apenas fazer:
<div style="text-align: center; border: 1px solid">
<input type="button" value="button">
</div>
Ou você pode fazer assim:
<div style="border: 1px solid">
<input type="button" value="button" style="display: block; margin: 0 auto;">
</div>
O primeiro irá alinhar tudo dentro da div. O outro centralizará o alinhamento apenas o botão.
et voila:
button {
width: 100px; // whatever your button's width
margin: 0 auto; // auto left/right margins
display: block;
}
Atualização : se o OP estiver procurando pelo centro horizontal e vertical, esta resposta o fará para um elemento fixo de largura / altura.
Margem: 0 automático; é a resposta correta apenas para centralização horizontal. Para centralizar as duas maneiras, algo como isso funcionará, usando 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);
Atualizar ... cinco anos depois , era possível usar o flexbox no elemento DIV pai para centralizar facilmente o botão na horizontal e na vertical.
Incluindo todos os prefixos do navegador, para melhor suporte
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;
}
Com os detalhes limitados fornecidos, assumirei a situação mais simples e direi que você pode usar text-align: center
:
Aqui você deve simplificar:
primeiro você tem a posição inicial do seu texto ou botão:
<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>
Adicionando essa linha de código css à tag h2 ou à tag div que contém a tag button
estilo: "alinhamento de texto: centro;"
Finalmente, o código do resultado será:
<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>
Me deparei com isso e pensei em deixar a solução que usei também, que utiliza line-height
e text-align: center
faz a centralização vertical e horizontal:
Para centralizar uma <button type = "button">
vertical e horizontalmente dentro de uma <div>
largura que seja computada dinamicamente como no seu caso, é isso que fazer:
text-align: center;
para o empacotamento <div>
: isso centralizará o botão sempre que você redimensionar a <div>
(ou melhor, a janela)Para o alinhamento vertical, você precisará definir margin: valuepx;
o botão. Esta é a regra sobre como calcular valuepx
:
valuepx = (wrappingDIVheight - buttonHeight)/2
Aqui está uma demonstração do JS Bin .
O mais fácil é inseri-lo como um "div", dar-lhe uma "margem: 0 auto", mas se você quiser que ele seja centralizado, você precisa dar uma largura
Div{
Margin: 0 auto ;
Width: 100px ;
}
Opção CSS responsiva para centralizar um botão na vertical e na horizontal sem se preocupar com o tamanho do elemento pai (usando ganchos de atributo de dados para esclarecer questões de separação e separação) :
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%;
}
Maneira responsiva de centralizar seu botão em uma 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>
Supondo que div seja #div e button seja #button:
#div {
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: center;
}
#button {}
Em seguida, aninhe o botão em div, como de costume.