Центрирование DIV-a с неизвестной шириной @ DeForum.ru
DeДверь  
Логин:  
Пароль:  
  Автологин  
   
Разместить рекламу
Письмо админу
Правила | FAQ | *Поиск | Наша команда | Регистрация | Вход
 
 
 Страница 1 из 1 [ Сообщений: 9 ] 
*   Список форумов / Начинка и техника / Программирование для WWW » ответить » создать топик « | »
Автор Сообщение
veejar
новый человек
0
Сообщения: 4
Зарегистрирован: 07.05.07
Заголовок сообщения: Центрирование DIV-a с неизвестной шириной
Сообщение Добавлено: 21 Ноябрь 2007, 17:50:16 
Нужно сверстать такое:
Изображение

Т.е. нужно отцентрировать DIV, который находится в TD и, что самое главное, не имеет конкретной ширины (мне очень важно, что бы он его ширину устанавливало его содержимое)

В Firefox и Opera сделать просто, потому что есть display: table. Вот код:

Код:
<style>
.mydiv {
  height: 100px;
  display: table;
  background-color: orange;
}
</style>

<table cellpadding='0' cellspacing='0' border='0' width='100%'>
  <tr>
    <td bgColor='#CCCCCC' align='center'>
      <div class='mydiv'>CONTENT</div>
    </td>
  </tr>
</table>


Как сделать для IE6+ не знаю. Пробовал многое. Никак.
Кто-то может имеет вариант?
xorvat Муж.
участник
41
Сообщения: 1632
Зарегистрирован: 19.06.06
Откуда: Киев
Сообщение Добавлено: 21 Ноябрь 2007, 18:18:25 
Код:
.mydiv {
  height: 100px;
  display: table;
  background-color: orange;
  text-align: center;
}

?! правильно понял? при любой ширине дива текст центрируется.

_________________
try not. do or do not. (c) Great Jedi Master Yoda
http://whereismyorwofilm.wordpress.com/ <--фотоблог.
http://www.ya-art.com/ << понты.
tentoys Муж.
постоянный участник
121
Сообщения: 2940
Зарегистрирован: 06.08.02
Откуда: МКАДонутряк
Заголовок сообщения: Re: Центрирование DIV-a с неизвестной шириной
Сообщение Добавлено: 21 Ноябрь 2007, 19:22:14 
veejar, ну, попробуйте так, вместо дива спан. Типа,
Код:
<body>
<table cellpadding='0' cellspacing='0' border='0' width='100%'>
  <tr>
    <td style="background-color:#ccc;text-align:center;">
   <span style="background-color:orange;width:auto;">
CONTENT<br> ещё CONTENT
   </span>
    </td>
  </tr>
</table>
</body>
</html>


_________________
Keep in touch. Andrey Alexeev.
ichik Муж.
соучастник
0
Сообщения: 434
Зарегистрирован: 09.07.06
Сообщение Добавлено: 22 Ноябрь 2007, 11:03:13 
Отцентрировать div?
Легко!
Код:
margin:0 auto 0 auto;
tentoys Муж.
постоянный участник
121
Сообщения: 2940
Зарегистрирован: 06.08.02
Откуда: МКАДонутряк
Сообщение Добавлено: 22 Ноябрь 2007, 11:29:46 
ichik, ответ не верный.

_________________
Keep in touch. Andrey Alexeev.
IonDen666 Муж.
постоянный участник
109
Сообщения: 3234
Зарегистрирован: 25.11.04
Откуда: Москва
Сообщение Добавлено: 22 Ноябрь 2007, 12:20:33 
ichik, это с фиксированной шириной :), и учите сокращения (0 auto достаточно)

_________________
Frontend developer: IonDen.com
[cyber]form Муж.
участник
60
Сообщения: 1523
Зарегистрирован: 26.10.05
Откуда: Латвия/Лиепая
Сообщение Добавлено: 22 Ноябрь 2007, 12:22:42 

veejar писал(а):
В Firefox и Opera сделать просто, потому что есть display: table.



а для ие есть display: inline-block.

фф его не понимает и прописанные два дисплея в одном стиле работают нормально, только проще воспользоваться span-ом.

да и вообще, у вас блок находится в ячейке таблицы, вам уже выше написали, что достаточно не самому блоку задавать центровку, а ячейке таблицы, чтоб центровала содержимое.

_________________
Жаль, что глупость не приносит болевых ощущений.
Антон Шандор ЛаВей
karamba Муж.
старожил
209
Сообщения: 6498
Зарегистрирован: 17.08.05
Откуда: Киев. А шо?
Сообщение Добавлено: 22 Ноябрь 2007, 12:49:12 
[cyber]form, +1.

_________________
клетчатый!
hardy Муж.
новый человек
2
Сообщения: 114
Зарегистрирован: 05.02.04
Откуда: Харьков, Украина
Сообщение Добавлено: 29 Ноябрь 2007, 11:29:12 
veejar,
я решаю эту проблему так:

.mydiv {
display:table;
margin:0 auto;
}
* html .mydiv {
position: relative;
left: 50%; /* сдвигаем юлок вправо на 50 процентов */
float: left; /* флоатим его, чтоб ширина была не 100 процентов а по содержимому */
margin-left: expression(((this.parentNode.offsetWidth - this.offsetWidth) / 2) + "px"); /* экспрешном сдвигаем влево на половину ширины */
}

:beer:

_________________
режу PSD в HTML
ICQ: 348215379
e-mail: sbaidin(собака)gmail.com
*   Список форумов / Начинка и техника / Программирование для WWW « | » » ответить » создать топик
 Страница 1 из 1 [ Сообщений: 9 ] 
Показать сообщения за:   Поле сортировки  
Найти:
Перейти:  
Уровень доступа: Вы не можете начинать темы. Вы не можете отвечать на сообщения. Вы не можете редактировать свои сообщения. Вы не можете удалять свои сообщения. Вы не можете добавлять вложения.
cron


ООО ДеФорум
При использовании материалов сайта ссылка на DeForum.ru — обязательна.
Проект Павла Батурина ©2001-2077; // Powered by phpBB © 2013 phpBB Group
Rambler's Top100