Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать текст по центру ДИВа? / 19 сообщений из 19, страница 1 из 1
07.07.2008, 08:12
    #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:13
    #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:28
    #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, 10:43
    #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:58
    #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, 11:01
    #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:05
    #35414361
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать текст по центру ДИВа?
illionв той ссылке есть еще хитрая приписка под ие
Т.е. центрироваться не будет? Потому как у меня не хочет центрироваться только по ИЕ
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.07.2008, 11:11
    #35414383
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать текст по центру ДИВа?
за просто так - не будет. Хоть ты тресни, а не догоняет он, что такое display:table и display:table-cell. Для него и нужны махинации с полями. (я когда-то пробовала оставить только те строки, что поля на уши натягивают, но ФФ ниже центра картинку показывал. Не стала разбираться, почему.)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.07.2008, 11:45
    #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, 12:34
    #35414640
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать текст по центру ДИВа?
а если достать код из <!--[if IE ]> и запихать его в основную таблицу стилей в таком вот виде:
Код: plaintext
1.
.inner   {top:expression("50%");}
.inner * {top:expression("-50%"); position:relative;}
то что будет?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.07.2008, 13: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:44
    #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:48
    #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:54
    #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, 19:45
    #35416153
зы
зы
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать текст по центру ДИВа?
что-то намудрено сильно в стилях...ниасилил... кстати зачастую виноваты маргины, они иногда обсчитываются разными бразуерами по-разному, особенно если доктайпа нет. Лучше пропиши доктайп, плюс попробуй паддинги
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.07.2008, 13:25
    #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:34
    #35417520
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать текст по центру ДИВа?
illionполучается, что есть изображение фиксированных размеров, а текста по высоте всегда не больше высоты изображения, и надо сравнять текст относительно картинки? Или все-таки текста бывает больше и картинку надо равнять тоже?
Равнять нужно только текст. Картинка уже спозиционирована в примере.
illionструктура текста то известна или может не всегда быть такой, как в примере?
Длинна-то (количество слов) будет разной...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.07.2008, 14:02
    #35417616
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать текст по центру ДИВа?
krvsaРавнять нужно только текст. Картинка уже спозиционирована в примере.
...
Длинна-то (количество слов) будет разной...
вот об этом и вопрос был. Если высота текста меньше высоты картинки, то текст должен центрироваться относительно картинки. А если наоборот - текста больше, то что тогда? По идее, раз .p_i_foto {float: left;}, то текст должен обтекать. Но два в одном (центрирование и обтекание) совместить не получится.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.07.2008, 15:39
    #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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать текст по центру ДИВа? / 19 сообщений из 19, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 404ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1456248]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 51ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 58ms
get tp. blocked users:
 1ms
others: 254ms
total:  404ms
x
x
Закрыть


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