Как разместить блок по центру, не беря в учет контент по бокам
Из названия темы вряд ли можно вынести полезную информацию.
http://jsfiddle.net/H7EAu/1/ — здесь красный блок (.primary), который должен быть всегда по середине блока #main. По бокам должны быть синие квадраты, не зависимо от их количества. Как это сделать при помощи CSS? Яваскриптом можно поменять марджин первого синего квадрата, но я все-таки надеюсь на CSS. Должно получиться вот так: http://jsfiddle.net/H7EAu/2/ |
При условии что у красного блока заданыы высота/ширина.
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>
|
Magneto, должен сохраняться порядок элементов. Например, пять синих, красный, три синих. Красный должен быть по центру.
|
Цитата:
|
Хотя щас есть одна идея.
|
Не никакак, разве что добавить классы элементам которые видны на экране и находятся слева от красного блока, то есть либо скриптом их добавить либо, в шаблоне при формировании страницы на сервере. хотя тогда уже проще просто спрятать лишние...
|
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>
|
Deff,
Гений! :lol: |
Цитата:
|
Цитата:
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 20:20. |