Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений) / 20 сообщений из 20, страница 1 из 1
23.04.2013, 21:33
    #38237359
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
сабж
C ув. Tors
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.04.2013, 21:34
    #38237360
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
tors,

высота блока фиксирована?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.04.2013, 21:41
    #38237367
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
как сделать сабж фесли фиксирована
и как если не фиксирована?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.04.2013, 21:44
    #38237372
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
torsкак сделать сабж фесли фиксирована
и как если не фиксирована?Таблицей. Оба варианта.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.04.2013, 21:52
    #38237380
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
для фиксированного можно просто http://jsfiddle.net/HSTXT/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2013, 12:16
    #38237939
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
авторкак грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
пытаюсь отцентрировать по горизонтали и вертикали так :
Код: css
1.
div.wrapper {display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle;}



Предполагается, width и height 100% от размера body
но у нас свой движек и он генерит промежуточные div'ы

Код: html
1.
2.
3.
4.
5.
6.
7.
<div id="screen" view="view.start_page">
 <div class="backbone-view" data-role="view">
   <div class="wrapper">
    <img src="../core/images/logo.jpg">
  </div>
 </div>
</div>



Поэтому данный подход не работает,
хотя если указать явно размеры - работает

как быть?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2013, 13:40
    #38238143
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
torsкак быть?
Ответ был дан выше...
AntonariyТаблицей.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2013, 13:41
    #38238147
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
Я бы тоже сделал таблицей и не парился.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2013, 13:50
    #38238168
ЫLL HEAD
ЫLL HEAD
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
tors,

тупо подставил ваш html (без вашего css) в ссылку:
Яростный Мечдля фиксированного можно просто http://jsfiddle.net/HSTXT/ див приклеен к середине по высоте
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 13:24
    #38241420
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
авторЯ бы тоже сделал таблицей и не парился.

http://jsfiddle.net/SEe3H/

взято один в один отсюда :) :
http://css-tricks.ru/Articles/Details/VerticalCenteringCSS

ни работает
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 13:40
    #38241447
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
tors,

Сделайте табличку с одной ячейкой, пропишите в свойствах (стили даже не трогайте) центрирование, и будет вам щасте.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 13:41
    #38241456
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
А остальные 4?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 13:51
    #38241487
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
авторА остальные 4?

негодяццо
я не знаю разрешение девайса
центрируемый блок не имеет фиксированной высоты
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 14:03
    #38241530
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
tors , ты хоть тут только в одной теме пиши...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 14:23
    #38241571
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .tablewrapper {display: table; border-style: solid; height: 500px}
        .cellwrapper {display: table-cell; vertical-align: middle; height: 100%;}
        body {height: 100%;}
    </style>
</head>
<body>
    <div class="tablewrapper">
        <div class="cellwrapper">
          <div>
            <ul>
                <li id="cards">
                    <span>CARDS</span>
                </li>
                <li id="filters">
                    <span>FILTERS</span>
                </li>
                <li id="stats">
                    <span>STATS</span>
                </li>
                <li id="help">
                    <span>HELP</span>
                </li>
            </ul>
        </div>
      </div>
    </div>
</body>
</html>



Код: css
1.
.tablewrapper {display: table; border-style: solid; height: 500px}


так центрируется
height : 500px
а так нет
height: 100%
почему браузер не понимает "%" ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 14:27
    #38241578
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<body>
<table class="tablewrapper" valign="middle">
    <tr valign="middle">
    <td class="cellwrapper" valign="middle">
        <div>
            <ul>
                <li id="cards">
                    <span>CARDS</span>
                </li>
                <li id="filters">
                    <span>FILTERS</span>
                </li>
                <li id="stats">
                    <span>STATS</span>
                </li>
                <li id="help">
                    <span>HELP</span>
                </li>
            </ul>
        </div>
    </td>
    </tr>
</table>
</body>
</body>
</html>



ни работает

блин до чего же геморная штука верстка и css
неужели в w3 не додумались как то штатно сделать вертикальное выравнивание
а то надо извращаться
все через ж@#$у
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 14:49
    #38241620
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
torsвсе через ж@#$у
У тебя - да.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 14:49
    #38241621
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
torsнеужели в w3 не додумались как то штатно сделать вертикальное выравниваниеЭто ты не додумался, а не w3c.
Код: css
1.
html, body {height: 100%;}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 14:53
    #38241627
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
torsпочему браузер не понимает "%" ?Чтобы "браузер понимал" проценты у какого-то элемента, нужно чтобы вся иерархия контейнеров этого элемента точно знала свою высоту хоть в каких-то единицах.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.04.2013, 15:02
    #38241642
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений)
Код: css
1.
html, body {height: 100%;}



я вешал 100% только на body

спасибо большое за помощь, хе-хе - работает
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как грамотно по вертикали отцентрировать блок (для любых девайсов и разрешений) / 20 сообщений из 20, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 590ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448400]:
 0ms
get settings:
 9ms
get forum list:
 21ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 217ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 73ms
get tp. blocked users:
 1ms
others: 246ms
total:  590ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]