Как горизонтально центрировать элемент span внутри div

Я пытаюсь центрировать "просмотр веб-сайта двух ссылок" и "просматривать проект" внутри окружающего div. Может кто-нибудь указать, что мне нужно сделать, чтобы сделать эту работу?

JS Fiddle: http://jsfiddle.net/F6R9C/

HTML

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

CSS

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}

Ответ 1

Один из вариантов - показать <a> отображение inline-block, а затем применить text-align: center; к содержащему блоку (также удалить поплавок):

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

Ответ 2

другой вариант заключается в том, чтобы дать span display:table; и центрировать его с помощью margin:0 auto;

span {
display:table;
margin:0 auto;
}

Ответ 3

<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>

Ответ 4

Применение inline-block к элементу, который должен быть центрирован, и применение text-align:center к родительскому блоку помогли мне.

Работает даже на тегах <span>.

Ответ 5

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

margin: 0 auto;

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

Вот jsfiddle, с которым я с головы до головы: jsFiddle

EDIT:

Адрессивный ответ - это самое простое решение:)

Ответ 6

Я предполагаю, что вы хотите сосредоточить их на одной линии, а не на двух отдельных строках, основанных на вашей скрипке. Если это так, попробуйте выполнить следующий css:

 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

Я удалил float с тех пор, как вы захотите его центрировать, а затем сделал пролет вокруг ссылок, центрированных добавлением поля: 0 автоматически. Наконец, я добавил статическую ширину в span. Это центрирует ссылки на одной строке в красном div.

Ответ 7

настройка отображения: flex и flex-direction: row будет выравнивать вложенные элементы по горизонтали.

div {
    display: flex;
    flex-direction: row;
}