Центрирование ряда элементов

Question

Центрирование ряда элементов

0

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

Итак, здесь идет...

<section>

<div style="width: 100%; margin: 0 auto; float: left; text-align:center;">

<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>

</div>

</section>


.circle {
    border-radius: 200%;
    width: 500px;
    height: 500px;
    background-color: #3B5163;
    padding: 50px;
    margin: 0 40px 0 40px;
}

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

user3435159 23 март 2014, в 20:05

Источник

Теги:

html

css

1 ответ

Ещё вопросы

GolezTrol · Accepted Answer · 2014-03-23T17-43-00.000Z

<section>
  <div class="container">
    <div><span class="circle">test</span></div>
    <div><span class="circle">test</span></div>
    <div><span class="circle">test three></span></div>
    <div><span class="circle">test</span></div>
    <div><span class="circle">test</span></div>
  </div>
</section>

Вы можете использовать text-align: center, как и вы, но для этого нужно, чтобы divs были встроенными или встроенными блочными элементами, например:

.container {
  text-align: center;
}
.container div {
  display: inline-block;
}

Вы можете добавить эти свойства в атрибуты style, как и вы, но в большинстве случаев лучше добавить его в отдельные файлы css.

Вы забыли закрыть 3-й промежуток + ваш код не работает, вы можете привести пример скрипки?
Ах, извините, это было отредактировано на лету - как для скрипки, я могу предоставить один да без меня.
Да. jsfiddle.net/MLTRF Похоже, что работает. Третий промежуток действительно не закрыт (я только что скопировал это, и не заметил). Но хотя это нехорошо, это не должно вызывать проблем при использовании в реальной жизни.
Вы забыли добавить его класс .circle к скрипке: P, но он работает так или иначе, поэтому +1 от меня
Да, я не думаю, что это было очень важно. Я добавил его сейчас и увидел некоторые проблемы с ним (из-за полей и размера кругов). Я также исправил это: jsfiddle.net/MLTRF/1 Тот, у которого более широкий текст, более эллиптический, но, поскольку я не знаю, как он должен выглядеть, я не обратил на это никакого внимания.
Хорошо, так что, следуя совету сверху, я пришел к этому. jsfiddle.net/iamdanbarrett/8GXKJ Кажется, это повсеместно? Мне буквально нужны круги - то, что выглядит как простая иконка планшета с иконкой сверху и текстом внизу - но при масштабировании кажется, что это немного повсюду - и по какой-то причине круги не делают см, чтобы понравиться высота или ширина им приходится использовать отступы, чтобы создать размер?