J'ai une division dont la largeur est de 100 %.
J'aimerais y centrer un bouton, comment puis-je faire ?
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>
J'ai une division dont la largeur est de 100 %.
J'aimerais y centrer un bouton, comment puis-je faire ?
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>
Réponse actualisée
Mise à jour parce que j'ai remarqué qu'il s'agit d'une réponse active, cependant Flexbox serait l'approche correcte maintenant.
Alignement vertical et horizontal.
#wrapper {
display: flex;
align-items: center;
justify-content: center;
}
Juste horizontal (tant que l'axe principal de flexion est horizontal, ce qui est le cas par défaut).
#wrapper {
display: flex;
justify-content: center;
}
Réponse originale utilisant une largeur fixe et pas de flexbox
Si le posteur original souhaite un alignement vertical et central, il est assez facile de fixer la largeur et la hauteur du bouton, essayez ce qui suit
CSS
button{
height:20px;
width:100px;
margin: -20px -50px;
position:relative;
top:50%;
left:50%;
}
pour un alignement horizontal uniquement, utilisez soit
button{
margin: 0 auto;
}
o
div{
text-align:center;
}
Tu pourrais juste faire :
<div style="text-align: center; border: 1px solid">
<input type="button" value="button">
</div>
Ou vous pouvez le faire comme ceci à la place :
<div style="border: 1px solid">
<input type="button" value="button" style="display: block; margin: 0 auto;">
</div>
Le premier aligne au centre tout ce qui se trouve à l'intérieur de la division. L'autre alignera au centre uniquement le bouton.
Et voilà :
button {
width: 100px; // whatever your button's width
margin: 0 auto; // auto left/right margins
display: block;
}
Mise à jour : Si l'OP recherche un centre horizontal et vertical, cette réponse le fera pour un élément de largeur/hauteur fixe.
Margin : 0 auto ; est la réponse correcte pour un centrage horizontal uniquement. Pour un centrage dans les deux sens, quelque chose comme ceci fonctionnera, en utilisant 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);
Mise à jour ... cinq ans plus tard Si l'on utilise la fonction "flexbox" sur l'élément DIV parent, on peut facilement centrer le bouton à l'horizontale et à la verticale.
Incluant tous les préfixes de navigateur, pour une meilleure prise en charge
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>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.