Добавление <div> к горизонтальному центру другого <div>

0

В настоящее время я пытаюсь создать небольшое меню, которое меняет положение по мере прокрутки пользователя. Я придумал это для стиля - http://jsfiddle.net/piedoom/S8tyn/

Как вы можете видеть, точки добавляются к каждому элементу текста <div>, и это выглядит так. Изображение 174551

Однако это выглядит очень уродливо. Как я могу центрировать каждую точку под каждым текстовым div? Я пробовал делать такие вещи, как text-align: center безрезультатно.

Теги:

3 ответа

1
Лучший ответ

Используйте стиль css margin: auto чтобы центрировать дочерний div.

http://jsfiddle.net/S8tyn/1/

Поделиться
  • 0
    Это работает - не думал об установке поля на авто. Я думал, что добавление добавит его после элемента, а не как ребенок. Поэтому, если я правильно понял, дочерний элемент добавляется в пространство размером с родительский элемент (то есть, насколько широк текст) и поля 0 auto; просто центрирует это между этим пространством?
  • 0
    Да это верно. Фактически, append добавляет элементы после последнего элемента в родительском элементе div (prepend добавляет его перед первым элементом). Поскольку родитель пустой, оба имеют одинаковый эффект.
0

Вот ответ на ваш вопрос: добавлены левые и крайние левые

.unselectedcircle
{
background: grey;
position: relative; 
top: 32px;
border-radius: 100%;
width: 10px;
left:50%;
margin-left:-5px;
height: 10px;
}

обновленная ссылка

Поделиться
  • 0
    Это хорошая альтернатива марже 0 авто. Буду ли я ошибаться, полагая, что это будет иметь больше совместимости с браузерами, как старые IE?
  • 0
    Я не верю, что это только на расчетной основе. margin-left находится в -ve, что составляет половину фактической ширины.
0

Просто измените свой стиль на следующий

.unselectedcircle
{
  background: grey;
  position: relative; 
  top: 32px;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin: 0 auto;
}

демонстрация

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню