|
|
23.05.2012, 21:07
|
 |
Новичок
|
|
Регистрация: 05.09.2010
Сообщений: 2,298
|
|
|
Как разместить блок по центру, не беря в учет контент по бокам
Из названия темы вряд ли можно вынести полезную информацию.
http://jsfiddle.net/H7EAu/1/ — здесь красный блок (.primary), который должен быть всегда по середине блока #main. По бокам должны быть синие квадраты, не зависимо от их количества. Как это сделать при помощи CSS? Яваскриптом можно поменять марджин первого синего квадрата, но я все-таки надеюсь на CSS. Должно получиться вот так: http://jsfiddle.net/H7EAu/2/ |
|
23.05.2012, 22:31
|
 |
Люмус, Емаксос Developer!
|
|
Регистрация: 06.05.2010
Сообщений: 677
|
|
При условии что у красного блока заданыы высота/ширина.
http://dl.dropbox.com/u/6001712/js.ru/center_div.html
<!doctype html>
<html><head>
<style>
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
overflow: hidden;
}
div {
width: 200px;
height: 200px;
position: relative;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
background-color: #a69;
}
</style>
</head><body>
<div></div>
</body></html>
|
|
23.05.2012, 22:33
|
|
Новичок
|
|
Регистрация: 05.09.2010
Сообщений: 2,298
|
|
|
Magneto, должен сохраняться порядок элементов. Например, пять синих, красный, три синих. Красный должен быть по центру.
|
|
24.05.2012, 13:34
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
|
Сообщение от FINoM
|
|
Например, пять синих, красный, три синих. Красный должен быть по центру.
|
Css никак, так как нельзя обратиться к предыдущим элементам от красного квадрата и убрать их... |
|
24.05.2012, 13:35
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
|
Хотя щас есть одна идея.
|
|
24.05.2012, 13:40
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
|
Не никакак, разве что добавить классы элементам которые видны на экране и находятся слева от красного блока, то есть либо скриптом их добавить либо, в шаблоне при формировании страницы на сервере. хотя тогда уже проще просто спрятать лишние...
|
|
27.05.2012, 15:42
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
FINoM,
<style>
#main {
background: gray;
width: 530px;
height: 500px;
overflow: hidden;
white-space: nowrap;
}
.secondary, .primary {
display: inline-block;
vertical-align: middle;
margin: 10px;
}
.secondary {
background: #009;
width: 50px;
height: 50px;
}
.primary {
background: #900;
width: 100px;
height: 100px;
}
</style>
<div id="main" style="position:relative;">
<div style="position:absolute;width:100%;z-index:100;text-align:center;"><div class="primary"></div></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
</div>
|
|
28.05.2012, 10:42
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
Deff,
Гений! 
|
|
29.05.2012, 22:40
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от FINoM
|
|
Как разместить блок по центру, не беря в учет контент по бокам
|
Все ж самое простое таблица на три ячейки со средней равной ширине "primary" |
|
30.05.2012, 12:32
|
|
Профессор
|
|
Регистрация: 01.10.2011
Сообщений: 422
|
|
|
Сообщение от Deff
|
|
Все ж самое простое таблица на три ячейки со средней равной ширине "primary"
|
|
Сообщение от Seva1986
|
|
Css никак, так как нельзя обратиться к предыдущим элементам от красного квадрата и убрать их...
|
|
Сообщение от Seva1986
|
|
Не никакак, разве что добавить классы элементам которые видны на экране и находятся слева от красного блока, то есть либо скриптом их добавить либо, в шаблоне при формировании страницы на сервере. хотя тогда уже проще просто спрятать лишние...
|
Или пример в студию |
|
|
|
