Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Отцентирировать по высоте <ul> <li> / 12 сообщений из 12, страница 1 из 1
21.02.2013, 21:19
    #38161452
TVadim
TVadim
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
Всем здрасте.
Подскажите как можно отцентировать данную структуру по высоте. В теге UL в классе задается картинка. Проблема в том что количество li может меняться от 1 до 3.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 21:26
    #38161455
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
background-position ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 21:28
    #38161456
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
P.S.: не плохо бы прояснить ситуацию тестовым примером, или скриншотом.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 21:35
    #38161465
TVadim
TVadim
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
Картинка в аттаче.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 21:42
    #38161473
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
TVadimВ теге UL в классе задается картинка.
Одна? Или таки две, как в картинке-примере?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 22:02
    #38161489
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
TVadim, так что-ли:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<!DOCTYPE HTML>
<html>
<head>
  <style>
    ul {
      background: url('http://learn.javascript.ru/files/play/51/26/51265ee4d1b77.png') 0 center no-repeat;
      color: red;
      font-family: Tahoma;
      font-size: 12px;
      font-weight: bold;
      min-height: 48px;
      padding: 0 0 0 76px;
    }
  </style>
</head>
<body>
  <ul>
    <li>Test message</li>
    <li>Test message 2<br/><br/><br/></li>
    <li>Test message 3</li>
  </ul>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 22:09
    #38161495
TVadim
TVadim
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
skyANATVadim, так что-ли:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<!DOCTYPE HTML>
<html>
<head>
  <style>
    ul {
      background: url('http://learn.javascript.ru/files/play/51/26/51265ee4d1b77.png') 0 center no-repeat;
      color: red;
      font-family: Tahoma;
      font-size: 12px;
      font-weight: bold;
      min-height: 48px;
      padding: 0 0 0 76px;
    }
  </style>
</head>
<body>
  <ul>
    <li>Test message</li>
    <li>Test message 2<br/><br/><br/></li>
    <li>Test message 3</li>
  </ul>
</body>
</html>



Читаешь мысли. Только <br/> нет.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 22:10
    #38161497
TVadim
TVadim
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
Картинка одна, извиняюсь за то что не отделил. Хотел показать что может быть одна или в две строки текст.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 22:14
    #38161502
TVadim
TVadim
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
Когда в одну строку, то она вверху. Пробовал делать display:table; vertical-align:middle; не помогло. Тег li отрисовывается сверху, а надо в центре. Т.е. любой текст должен центрироваться.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 22:29
    #38161514
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
TVadimТег li отрисовывается сверху, а надо в центре. Т.е. любой текст должен центрироваться.
Т.о. делаю вывод, что тебе нужно просто центрировать два элемента:
- картинку
- список
А это табличка из одной строки и двух ячеек. В первой картинка, а во второй список... Табличка центрирует все без проблем!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 22:36
    #38161521
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
TVadim, так:
Код: 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>
  <style>
    .message-list-container {
      background: url('http://learn.javascript.ru/files/play/51/26/51265ee4d1b77.png') 8px center no-repeat;        
      color: red;
      display: table;
      font: 12px Tahoma;
      font-weight: bold;
      height: 80px;
      padding: 8px 8px 8px 80px;
      width: 200px;
    }
      
    .message-list-container ul {
      display: table-cell;
      margin: 0;
      padding: 0;
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="message-list-container">
    <ul>
      <li>Test message</li>
      <li>Test message 2<br/><br/><br/></li>
      <li>Test message 3</li>
    </ul>
  </div>
</body>
</html>

?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.02.2013, 22:44
    #38161533
TVadim
TVadim
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Отцентирировать по высоте <ul> <li>
Спасибо.

Все гениальное просто.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Отцентирировать по высоте <ul> <li> / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 375ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1448673]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 44ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 58ms
get tp. blocked users:
 1ms
others: 225ms
total:  375ms
x
x
Закрыть


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