ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Отцентирировать по высоте <ul> <li>
12 сообщений из 12, страница 1 из 1
Отцентирировать по высоте <ul> <li>
    #38161452
TVadim
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TVadim
Участник
Всем здрасте.
Подскажите как можно отцентировать данную структуру по высоте. В теге UL в классе задается картинка. Проблема в том что количество li может меняться от 1 до 3.
...
Рейтинг: 0 / 0
21.02.2013, 21:19
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161455
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
background-position ?
...
Рейтинг: 0 / 0
21.02.2013, 21:26
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161456
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
P.S.: не плохо бы прояснить ситуацию тестовым примером, или скриншотом.
...
Рейтинг: 0 / 0
21.02.2013, 21:28
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161465
TVadim
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TVadim
Участник
Картинка в аттаче.
...
Рейтинг: 0 / 0
21.02.2013, 21:35
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161473
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
TVadimВ теге UL в классе задается картинка.
Одна? Или таки две, как в картинке-примере?
...
Рейтинг: 0 / 0
21.02.2013, 21:42
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161489
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
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:02
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161495
TVadim
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TVadim
Участник
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:09
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161497
TVadim
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TVadim
Участник
Картинка одна, извиняюсь за то что не отделил. Хотел показать что может быть одна или в две строки текст.
...
Рейтинг: 0 / 0
21.02.2013, 22:10
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161502
TVadim
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TVadim
Участник
Когда в одну строку, то она вверху. Пробовал делать display:table; vertical-align:middle; не помогло. Тег li отрисовывается сверху, а надо в центре. Т.е. любой текст должен центрироваться.
...
Рейтинг: 0 / 0
21.02.2013, 22:14
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161514
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
TVadimТег li отрисовывается сверху, а надо в центре. Т.е. любой текст должен центрироваться.
Т.о. делаю вывод, что тебе нужно просто центрировать два элемента:
- картинку
- список
А это табличка из одной строки и двух ячеек. В первой картинка, а во второй список... Табличка центрирует все без проблем!
...
Рейтинг: 0 / 0
21.02.2013, 22:29
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161521
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
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:36
| Ответить | Цитировать | Написать  
Отцентирировать по высоте <ul> <li>
    #38161533
TVadim
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TVadim
Участник
Спасибо.

Все гениальное просто.
...
Рейтинг: 0 / 0
21.02.2013, 22:44
| Ответить | Цитировать | Написать  
12 сообщений из 12, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Отцентирировать по высоте <ul> <li>
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38161473&tid=1448673]:
 0ms
get settings:
 10ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 198ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 65ms
get tp. blocked users:
 2ms
others: 284ms
total:  601ms
созд. / загр.: 601ms
x
x
Закрыть


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