horizontalement - Comment centrer plusieurs éléments inline-block avec CSS?
put element in center of div css (4)
Définissez text-align: center;
sur l'élément parent.
Je souhaite centrer horizontalement deux (ou éventuellement plusieurs) éléments de bloc en ligne dans un élément de bloc conteneur. Ça devrait ressembler à ça:
--------------------------
| _____ _____ |
| | | | | |
| | foo | | bar | |
| |_____| |_____| |
|_________________________|
Cependant, avec mon code cassé, il se présente comme ceci:
--------------------------
| _____ ____ |
|| | | | |
|| foo | | bar | |
||_____| |_____| |
|_________________________|
HTML
<div>
<a>foo</a>
<a>bar</a>
</div>
CSS
div a {
display: inline-block;
padding: 1em;
margin: 1em;
border: 1px solid black;
}
La raison pour laquelle les deux ancres doivent être inline-block et pas simplement inline est parce que je ne veux pas que le remplissage et la marge de l'ancre se chevauchent.
Il suffit de définir text-align: center;
sur le conteneur div.
Soit vous pouvez essayer ceux-ci
div{
text-align:center;
}
ou réglez la marge auto comme indiqué ci-dessous
div a{
margin:auto;
margin-left:1em;
margin-right:1em;
margin-top:1em;
margin-bottom:1em;
display:inline-block;
}
Un bon exemple est montré here
avez-vous essayé le suivant?
div{
text-align:center;
}