Voici le bouton:

.button {
width: 210px;
background-color: lightgray; /* Green */
border: none;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}

J'ai essayé ça:

input.button {
margin: 0 auto;
}

Et ça:

#buttonone {
margin-left: auto;
margin-right: auto;
}

Et plein d'autres choses. Qu'est-ce que je fais mal? Je vous remercie.

0
Fredrik Burmester 25 nov. 2017 à 03:51

3 réponses

Meilleure réponse

Avec display:block et margin:0 auto, cela devrait fonctionner parfaitement:

.button {
margin:0 auto;
display:block;

width: 210px;
background-color: lightgray;
border: none;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
<button class="button">Button</button>
1
Miro 25 nov. 2017 à 01:05

La marge automatique ne fonctionne pas sur les éléments en ligne, mais sur les éléments de niveau bloc.

La définition de la largeur d'un élément de niveau bloc l'empêchera de s'étirer jusqu'aux bords de son conteneur vers la gauche et la droite. Ensuite, vous pouvez définir les marges gauche et droite sur auto pour centrer horizontalement cet élément dans son conteneur. L'élément occupera la largeur que vous spécifiez, puis l'espace restant sera réparti uniformément entre les deux marges.

Vous pouvez utiliser text-align: center à la place.

0
Quicksilver 25 nov. 2017 à 01:07

Une autre façon de procéder:

//<![CDATA[
/* external.js */
// You should always use exteral code, when possible, for caching reasons.
var doc, bod, I, old = onload; // for use on other loads
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body;
I = function(id){
  return doc.getElementById(id);
}
var out = I('out');
I('btn').onclick = function(){
  out.innerHTML = 'Wow, you clicked the button!';
}
}
//]]>
/* external.css */
html,body{
  padding:0; margin:0;
}
body{
  background:#000; overflow-y:scroll;
}
.main{
  width:936px; background:#fff; padding:20px; margin:0 auto;
}
.cntr{
  text-align:center;
}
#btn{
  width:210px; background:lightgray; color:white;
  font-size:16px; padding:15px 20px; border:0; cursor:pointer;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>test</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <div class='cntr'>
      <input id='btn' type='button' value='Click Me' />
      <div id='out'></div>
    </div>
  </div>
</body>
</html>
0
StackSlave 25 nov. 2017 à 01:47
47481681