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