ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать текст по центру ДИВа?
19 сообщений из 19, страница 1 из 1
Как сделать текст по центру ДИВа?
    #35414005
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Как сделать текст по центру ДИВа?

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<html>
<head>
<style type='text/css'>
div {
   width: 300px;
   height: 200px;
}
</style>
</head>
<body>
<div>
   <p>Пример текста</p>
</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
07.07.2008, 08:12
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414007
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Забыл уточнить... Центрировать по вертикали.
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
07.07.2008, 08:13
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414020
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Поторопился...
В соседней теме уже дали путевую ссылку. Если кому будет интересно вот ответ

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<html>
<head>
<style type='text/css'>
div {
   width: 300px;
   height: 500px;
   vertical-align: middle; 
   position:relative;
   display:table;
}
p {
  width: 100 %;
  display:table-cell;
  vertical-align:middle;
  position:relative;
}
</style>
</head>
<body>
<div>
   <p>Пример текста</p>
</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
07.07.2008, 08:28
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414298
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Что-то не желает "конечный" вариант текста быть по центру...

Мало того. Есть еще две проблемки:
1. В ИЕ главный ДИВ "не желает" быть нужным размером по вертикали (получается больше)
2. Наверно как следствие п.1... Если скопировать всю конструкцию еще раз (сделать клона) - появляется большей отступ между ними.

Код: plaintext
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.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>

<style type='text/css'>
.p_item {
	width: 230px;
	height: 77px;
	margin-left: 20px;
	background-color : Aqua;
}
.p_i_left {
	width: 9px;
	height: 77px;
	float: left;
	background: url(img/p_i_left.jpg) no-repeat;
}
.p_i_cont {
	width: 197px;
	height: 77px;
	float: left;
	background: url(img/p_i_cont.jpg) repeat-x;
}
.p_i_right {
	width: 9px;
	height: 77px;
	float: left;
	background: url(img/p_i_right.jpg) no-repeat;
}
.p_i_itm {
	width: 9px;
	height: 77px;
	float: left;
	margin-top: 35px;
}
div.p_i_txt {
	width: 143px;
	height: 53px;
	float: left;
	color: rgb( 245 , 180 , 6 );
	font-family : Arial;
	font-size : 12pt;
	font-weight : bold;
	vertical-align: middle; 
	position:relative;
	display:table;
}
p.p_i_txt {
	display:table-cell;
	vertical-align:middle;
	position:relative;
}
.p_i_foto {
	width: 52px;
	height: 53px;
	float: left;
	margin-top: 12px;
	background-color: Silver;
}
</style>
</head>
<body>
<div class='p_item'>
	<div class='p_i_left'></div>
	<div class='p_i_cont'>
		<div class='p_i_txt'>
			<p class='p_i_txt'>Пример текста для посмотреть1</p>
		</div>
		<div class='p_i_foto'></div>
	</div>
	<div class='p_i_right'></div>
	<div class='p_i_itm'>
	</div>
</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
07.07.2008, 10:43
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414335
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Все. Нашел где "собака порылась"...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
07.07.2008, 10:58
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414346
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
в той ссылке есть еще хитрая приписка под ие:
Код: plaintext
1.
2.
3.
4.
5.
<!--[if IE ]>
<style type="text/css">
.inner {top: 50 %;left: 0 ;}
.inner img{top:- 50 %;	position:relative;}
</style>
<![endif]-->
вариант с display:table - для нормальных браузеров. А ИЕ (дурень) из 17 значений display нормально понимает только 4. И table, table-cell и т.п. в эти 4 не входит.
...
Рейтинг: 0 / 0
07.07.2008, 11:01
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414361
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionв той ссылке есть еще хитрая приписка под ие
Т.е. центрироваться не будет? Потому как у меня не хочет центрироваться только по ИЕ
...
Рейтинг: 0 / 0
07.07.2008, 11:05
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414383
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
за просто так - не будет. Хоть ты тресни, а не догоняет он, что такое display:table и display:table-cell. Для него и нужны махинации с полями. (я когда-то пробовала оставить только те строки, что поля на уши натягивают, но ФФ ниже центра картинку показывал. Не стала разбираться, почему.)
...
Рейтинг: 0 / 0
07.07.2008, 11:11
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414484
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот ведь незадача...
В моем случае <div class='p_item'> является пунктом в меню... И какой там будет текст мне "неведомо". Т.е. нужно каждому элементу указывать какой отступ иметь в ДИВе.
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
07.07.2008, 11:45
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414640
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
а если достать код из <!--[if IE ]> и запихать его в основную таблицу стилей в таком вот виде:
Код: plaintext
1.
.inner   {top:expression("50%");}
.inner * {top:expression("-50%"); position:relative;}
то что будет?
...
Рейтинг: 0 / 0
07.07.2008, 12:34
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414825
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
А куда его там вставить? А то я не особо понял...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
07.07.2008, 13:34
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414863
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
эээ.... я так понимаю, что <div class='p_i_cont'> - это контейнер пункта меню (текст+фото). Тогда
Код: plaintext
1.
.p_i_cont   {top:expression("50%");}
.p_i_cont * {top:expression("-50%"); position:relative;}
как-то так.
...
Рейтинг: 0 / 0
07.07.2008, 13:44
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414878
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Да это контейнер... Ща попробую.
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
07.07.2008, 13:48
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35414906
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Все "упрыгивает" вверх. Так как буд-то есть еще один такой элемент выше этих... Но текст по центру вроде.

Только вот как его опустить теперь?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
07.07.2008, 13:54
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35416153
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
что-то намудрено сильно в стилях...ниасилил... кстати зачастую виноваты маргины, они иногда обсчитываются разными бразуерами по-разному, особенно если доктайпа нет. Лучше пропиши доктайп, плюс попробуй паддинги
...
Рейтинг: 0 / 0
07.07.2008, 19:45
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35417492
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsaВсе "упрыгивает" вверх.
ага. Ну это ясно почему - в <div class='p_i_cont'> расположен тег <div class='p_i_txt'>, а в нем еще вложен <p>. Правило .inner * {top:expression("-50%");} применилось естественно к ним к обоим.

Я вот сейчас только обратила внимание - ты пытаешься сделать выравнивание внутри p.p_i_txt, а p_i_foto вроде как не трогаешь. То есть получается, что есть изображение фиксированных размеров, а текста по высоте всегда не больше высоты изображения, и надо сравнять текст относительно картинки? Или все-таки текста бывает больше и картинку надо равнять тоже?

А еще
krvsaВ моем случае <div class='p_item'> является пунктом в меню... И какой там будет текст мне "неведомо".
структура текста то известна или может не всегда быть такой, как в примере?
...
Рейтинг: 0 / 0
08.07.2008, 13:25
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35417520
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionполучается, что есть изображение фиксированных размеров, а текста по высоте всегда не больше высоты изображения, и надо сравнять текст относительно картинки? Или все-таки текста бывает больше и картинку надо равнять тоже?
Равнять нужно только текст. Картинка уже спозиционирована в примере.
illionструктура текста то известна или может не всегда быть такой, как в примере?
Длинна-то (количество слов) будет разной...
...
Рейтинг: 0 / 0
08.07.2008, 13:34
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35417616
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsaРавнять нужно только текст. Картинка уже спозиционирована в примере.
...
Длинна-то (количество слов) будет разной...
вот об этом и вопрос был. Если высота текста меньше высоты картинки, то текст должен центрироваться относительно картинки. А если наоборот - текста больше, то что тогда? По идее, раз .p_i_foto {float: left;}, то текст должен обтекать. Но два в одном (центрирование и обтекание) совместить не получится.
...
Рейтинг: 0 / 0
08.07.2008, 14:02
| Ответить | Цитировать | Написать  
Как сделать текст по центру ДИВа?
    #35417969
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Для меня достаточно сделать текст в <div class='p_i_txt'> по центру (вертикально). А фотка путь стоит как стояла...
Но как вариант можно ценровать и текст и фотку внутри <div class='p_i_cont'>...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
08.07.2008, 15:39
| Ответить | Цитировать | Написать  
19 сообщений из 19, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать текст по центру ДИВа?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35414005&tid=1456248]:
 0ms
get settings:
 8ms
get forum list:
 12ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 196ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 37ms
get tp. blocked users:
 1ms
others: 222ms
total:  489ms
созд. / загр.: 489ms
x
x
Закрыть


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