Вопрос:
Я пытаюсь центрировать “просмотр веб-сайта двух ссылок” и “просматривать проект” внутри окружающего 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 } Лучший ответ:
Один из вариантов – показать <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
другой вариант заключается в том, чтобы дать span display:table; и центрировать его с помощью margin:0 auto;
span { display:table; margin:0 auto; } Ответ №2<div style=»text-align:center»> <span>Short text</span><br /> <span>This is long text</span> </div> Ответ №3
Применение inline-block к элементу, который должен быть центрирован, и применение text-align:center к родительскому блоку помогли мне.
Работает даже на тегах <span>.
Ответ №4
Пролисты могут немного запутаться. если вы установите ширину диапазона обучения, вы можете использовать
margin: 0 auto;
чтобы центрировать их, но затем они заканчиваются на разных линиях. Я бы предложил попробовать другой подход к вашей структуре.
Вот jsfiddle, с которым я с головы до головы: jsFiddle
EDIT:
Адрессивный ответ – это самое простое решение:)
Ответ №5
Я предполагаю, что вы хотите сосредоточить их на одной линии, а не на двух отдельных строках, основанных на вашей скрипке. Если это так, попробуйте выполнить следующий 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.
Ответ №6
настройка отображения: flex и flex-direction: row будет выравнивать вложенные элементы по горизонтали.
div { display: flex; flex-direction: row; }