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

123

Я пытаюсь центрировать две ссылки «просмотр веб-сайта» и «просмотр проекта» внутри окружающего 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
}

css

— J82
источник

По теме: stackoverflow.com/questions/7886460/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

Вот два простых метода центрирования элементов внутри div: по вертикали, горизонтали или по обоим направлениям (чистый CSS): stackoverflow.com/a/31977476/3597276

— Майкл Бенджамин,

134

Один из вариантов - <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/

— дрейфовать
источник

1

Это помогло мне в умеренно сложной теме, которую мне нужно было немного взломать. Ссылка на JSFiddle была прекрасной, чтобы я мог протестировать. Я отредактировал эту запись, чтобы включить замену «overflow: hidden» на «overflow: hidden;»

— нарисовал ..

1

Похоже на очень чистое решение.

— Джим Ахо

См. Ответ Ахмеда Бахтити ниже, style = "text-align: center", он намного лаконичнее.

— Уоллес Ховери

142

другой вариант - задать промежуток display:table;и центрировать его черезmargin:0 auto;

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

— user1721135
источник

4

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

— Джим Ахо

Поддерживается только в браузерах, обновленных за последние пару лет. caniuse.com/#feat=css-table

— CamHart

1

лучшее решение IMO

— Martijn Scheffer

10

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

— Ахмед Бахтити
источник

8

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

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

— Тальха Имам
источник

1

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

margin: 0 auto;

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

Вот jsfiddle, который я снял с макушки: jsFiddle

РЕДАКТИРОВАТЬ:

Ответ Adrift - самое простое решение :)

— Дэвид Зиманн
источник

0

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

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

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

— Duffmaster33
источник

0

только css div вы можете центрировать контент

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

http://jsfiddle.net/4q2r69te/1/

— MrBii
источник