Как центрировать несколько встроенных элементов с помощью CSS?

Я хочу горизонтально центрировать два (или, возможно, больше) внутристрочных элементов внутри элемента блока контейнера. Он должен выглядеть следующим образом:

--------------------------
|      _____   _____      |
|     |     | |     |     |
|     | foo | | bar |     |
|     |_____| |_____|     |
|_________________________|

Однако, с моим сломанным кодом, он выглядит следующим образом:

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

Причина, по которой два якоря должны быть встроенным блоком, а не просто встроенным, заключается в том, что я не хочу, чтобы перекрытие и маржа перекрывались.

Ответ 1

Просто установите text-align: center; в контейнер div.

Ответ 2

Установите text-align: center; в родительский элемент.

Ответ 3

Вы пробовали следующее?

div{
   text-align:center;
}

Ответ 4

Либо вы можете попробовать эти

div{
   text-align:center;
}

или установите маржу автоматически, как показано ниже

div a{
  margin:auto;
  margin-left:1em;
  margin-right:1em;
  margin-top:1em;
  margin-bottom:1em;
 display:inline-block;
}

Хороший пример показан здесь

Ответ 5

Я использовал text-align: "center" в родительском контейнере и центрировал UL на странице, но также центрировал текст в UL (не желателен). Поэтому я добавил text-align: "left" в <ul>, чтобы текст был рядом с list-style.

Ответ 6

Добавьте text-align: center в родительский элемент div.