Как лучше выполнить задачу с обложками журналов?

[Anatuz]

Есть 11 обложек журналов (картинок). 10 из них нужно разместить вокруг главного журнала (типа солнце и планеты). Под этими обложками будет текст (название журнала и номер). То есть главный журнал по центру, остальные во круг него. А сама вся конструкция в центре страницы. При этом очень важно, чтобы каждый элемент можно было свободно позиционировать в любом месте. Например из ровной линии 4-х обложек вверху сделать дугу и т.п.

 

Я хочу сделать это с помощью position: fixed Подскажите, насколько это верное решение? Или существует более грамотный способ?

 

Примерно это должно выглядеть вот так

 

[ShumNo]

если задача свободно позиционировать любой элемент то position:absolute;

Edited October 13, 2014 by ShumNo

[Anatuz]

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

[ShumNo]

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

Можете использовать div 

можете и с помощью таблицы сделать

Можете поместить все в общий div который можете позиционировать как хотите.

 

Вариантов много, но я не понимаю на 100% что именно вы хотите и что вы подразумеваете под фразами

При этом очень важно, чтобы каждый элемент можно было свободно позиционировать в любом месте.

[Anatuz]

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

 

Если я делаю

 

position: fixed;

top: 20%;

left: 50%;

 

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

[Sergik+]

А зачем все в один див пихать ? Верхний и нижний див просятся одним классом а средний див делайте отдельно,

хотя можно и все три строки сделать дивом с одним классом просто еще добавить класс в среднюю колонку.

[ShumNo]

Попробуйте так http://jsfiddle.net/kr2gqjst/

[Anatuz]

Спасибо за советы! Справился сам:

        display:block;	width:1000px;	height:640px;	position:fixed;	top:35%;	left:50%;	margin-top:-320px;	border: 1px solid;

Edited October 13, 2014 by Anatuz