Выравнивание по центру по вертикали в Div @ DeForum.ru
DeДверь  
Логин:  
Пароль:  
  Автологин  
   
Разместить рекламу
Письмо админу
Правила | FAQ | *Поиск | Наша команда | Регистрация | Вход
 
 
 Страница 1 из 1 [ Сообщений: 24 ] 
*   Список форумов / Начинка и техника / Программирование для WWW » ответить » создать топик « | »
Автор Сообщение
leopard Жен.
новый человек
0
Сообщения: 27
Зарегистрирован: 10.03.06
Откуда: Калининград
Заголовок сообщения: Выравнивание по центру по вертикали в Div
Сообщение Добавлено: 11 Апрель 2006, 15:29:43 
Как выровнять содержимое в div по центру по вертикали.
Div фиксированного размера по высоте с фоном.
Внутри картинка размер не фиксирован.
tentoys Муж.
постоянный участник
121
Сообщения: 2940
Зарегистрирован: 06.08.02
Откуда: МКАДонутряк
Заголовок сообщения: Re: Выравнивание по центру по вертикали в Div
Сообщение Добавлено: 11 Апрель 2006, 16:00:54 

leopard писал(а):
Как выровнять содержимое в div по центру по вертикали.


padding-top: 25%;
padding-bottom: 25%;
или margin по 25%, чего-то из головы вылетело. ;-)

_________________
Keep in touch. Andrey Alexeev.
leopard Жен.
новый человек
0
Сообщения: 27
Зарегистрирован: 10.03.06
Откуда: Калининград
Сообщение Добавлено: 11 Апрель 2006, 16:11:36 

tentoys писал(а):
padding-top: 25%;
padding-bottom: 25%;
или margin по 25%, чего-то из головы вылетело. ;-)


не подходит.
у меня отступ может быть меньше 25%, если так поставить все развалится.
tentoys Муж.
постоянный участник
121
Сообщения: 2940
Зарегистрирован: 06.08.02
Откуда: МКАДонутряк
Сообщение Добавлено: 11 Апрель 2006, 17:03:47 

leopard писал(а):
не подходит. у меня отступ может быть меньше 25%, если так поставить все развалится.


Тогда у Вас нет выравнивания по центру. Изначально. Ибо представьте, что отступив по четверти сверху и снизу, контент займёт ровно 50%. У Вас, как Вы говорите, по-другому. Тогда ставьте правильно вопрос.
Или дайте ссылку посмотреть, или приведите код.

_________________
Keep in touch. Andrey Alexeev.
leopard Жен.
новый человек
0
Сообщения: 27
Зарегистрирован: 10.03.06
Откуда: Калининград
Сообщение Добавлено: 11 Апрель 2006, 17:09:15 
[quote="tentoys]Тогда у Вас нет выравнивания по центру. Изначально. Ибо представьте, что отступив по четверти сверху и снизу, контент займёт ровно 50%. У Вас, как Вы говорите, по-другому. Тогда ставьте правильно вопрос.
Или дайте ссылку посмотреть, или приведите код.[/quote]

#partn_small2{
background:url(img/fon2.jpg);
background-repeat:no-repeat;
background-position:left;
float:left;
width:78px;
height:51px;
margin-left:0px;
margin-bottom:3px;
margin-top:5px;
text-align:center;
position:static;
}
<div id=partn_small2><img src=""></div>

картинка располагается по центру относительно горизонтали, надо чтоб еще и по вертикали.
картинка меньше дива примерно на 1 - 10%
.talisman Муж.
участник
84
Сообщения: 1562
Зарегистрирован: 13.01.05
Сообщение Добавлено: 12 Апрель 2006, 08:41:42 
top:50%; left:50%; width:500px; height:300px; margin:-150px 0 0 -250px;
leopard Жен.
новый человек
0
Сообщения: 27
Зарегистрирован: 10.03.06
Откуда: Калининград
Сообщение Добавлено: 12 Апрель 2006, 10:30:20 

.talisman писал(а):
top:50%; left:50%; width:500px; height:300px; margin:-150px 0 0 -250px;



<div style="top:50%; left:50%; width:500px; height:300px; margin:-150px 0 0 -250px;">

11111111111111<br>
11111111111111

</div>

Вы хоть сами смотрели, что будет в таком случаее ?
Либо я что-то не понимаю.


Последний раз редактировалось leopard 12 Апрель 2006, 15:31:10, всего редактировалось 1 раз.
Бaзиль Муж.
участник
49
Сообщения: 1288
Зарегистрирован: 13.02.05
Откуда: Околомосковье
Сообщение Добавлено: 12 Апрель 2006, 12:40:35 
leopard, если только картинка, то вот:

#boo{
background:url('img.jpg');
background-repeat:no-repeat;
background-position:center;
}

<div id="boo">&nbsp;</div>

Зачем выравнивать тег <img>, если можно картинку сделать фоном?

_________________
Не кочегары мы, не плотники,
Но сожалений горьких нет -
Как нет?
А мы дизайнеры-художники,
И с высоты вам шлем привет -
Привет!
leopard Жен.
новый человек
0
Сообщения: 27
Зарегистрирован: 10.03.06
Откуда: Калининград
Сообщение Добавлено: 12 Апрель 2006, 15:30:31 
Бaзиль, нет нельзя, там уже есть фон.
Но идея хороша, я добавила еще один див, и в него уже фоном пустила нужную мне картинку :)
спасибо :beer:
Бaзиль Муж.
участник
49
Сообщения: 1288
Зарегистрирован: 13.02.05
Откуда: Околомосковье
Сообщение Добавлено: 13 Апрель 2006, 10:04:45 
leopard, если нужно два фона, то нужно два дива :beer:

_________________
Не кочегары мы, не плотники,
Но сожалений горьких нет -
Как нет?
А мы дизайнеры-художники,
И с высоты вам шлем привет -
Привет!
leopard Жен.
новый человек
0
Сообщения: 27
Зарегистрирован: 10.03.06
Откуда: Калининград
Сообщение Добавлено: 13 Апрель 2006, 10:39:40 
риторический вопрос: а что если это будет текст, как тогда быть ?
Abstract Муж.
постоянный участник
37
Сообщения: 3900
Зарегистрирован: 25.10.05
Откуда: Ближнее зарубежье
Сообщение Добавлено: 13 Апрель 2006, 14:28:57 
Риторический ответ: будет конкретная задача по вёрстке, будет решение. Не все задачи решаются нормальными средствами из-за недоделанности CSS в браузерах, но далеко не все задачи по вёрстке следует ставить вообще, это уже вопрос к грамотности верстальщика и в большей степени дизайнера.
Бaзиль Муж.
участник
49
Сообщения: 1288
Зарегистрирован: 13.02.05
Откуда: Околомосковье
Сообщение Добавлено: 13 Апрель 2006, 14:34:23 
плюнуть и сделать таблицу.

_________________
Не кочегары мы, не плотники,
Но сожалений горьких нет -
Как нет?
А мы дизайнеры-художники,
И с высоты вам шлем привет -
Привет!
leopard Жен.
новый человек
0
Сообщения: 27
Зарегистрирован: 10.03.06
Откуда: Калининград
Сообщение Добавлено: 13 Апрель 2006, 16:23:59 
Abstract, На самом деле задача как бы и поставленна, просто ее можно решить с помощью таблицы. Но коль многие говорят, что с помощью div можно сделать то же, что и с таблицами, вот и появляются такие вопросы и задачи.

Бaзиль, это точно ! :lol:
Abstract Муж.
постоянный участник
37
Сообщения: 3900
Зарегистрирован: 25.10.05
Откуда: Ближнее зарубежье
Сообщение Добавлено: 13 Апрель 2006, 16:50:20 
leopard, можно сделать ровно столько, сколько позволяют браузеры, только и всего. А поскольку они всё больше соответствуют стандартам, то чем меньше будет сделано поперёк этих стандартов, тем дольше проделанная работа будет оставаться современной. Я считаю, что если нет сверхнеобходимости ставить такого рода задачи, лучше их не ставить.
leopard Жен.
новый человек
0
Сообщения: 27
Зарегистрирован: 10.03.06
Откуда: Калининград
Сообщение Добавлено: 14 Апрель 2006, 10:21:56 
Abstract, это верно, но я, например, не всегда знаю, что именно идет поперек, вот и ставлю. Теперь исходя из данной темы, сложилось такое мнение, что в данной задаче, с условием, что внутри текст, необходимо использовать таблицу.
Бaзиль Муж.
участник
49
Сообщения: 1288
Зарегистрирован: 13.02.05
Откуда: Околомосковье
Сообщение Добавлено: 14 Апрель 2006, 10:31:24 
leopard, ага. Если текст, то таблицу.

_________________
Не кочегары мы, не плотники,
Но сожалений горьких нет -
Как нет?
А мы дизайнеры-художники,
И с высоты вам шлем привет -
Привет!
1NV1Z0R
соучастник
12
Сообщения: 971
Зарегистрирован: 27.09.05
Сообщение Добавлено: 14 Апрель 2006, 11:29:54 
Талисман все правильно сказал, только забыл добавить что к контейнеру внутри которого идет выравнивание нужно применить position:relative;
leopard Жен.
новый человек
0
Сообщения: 27
Зарегистрирован: 10.03.06
Откуда: Калининград
Сообщение Добавлено: 14 Апрель 2006, 13:03:31 
1NV1Z0R, пробую, ставлю бордер, и вижу, что текст находится в правом углу.
Код:
<div style="top:50%; left:50%; width:500px; height:300px; margin:-150px 0 0 -250px; border:solid; position:relative;">

11111111111111<br>
11111111111111

</div>
Goldie
новый человек
0
Сообщения: 205
Зарегистрирован: 09.03.02
Откуда: Москва
Сообщение Добавлено: 21 Апрель 2006, 16:27:10 
Учите матчасть!
http://brunildo.org/test/shrink_center_4.html

_________________
Выживают, только лучшие...
Fockus Муж.
новый человек
0
Сообщения: 17
Зарегистрирован: 12.09.07
Сообщение Добавлено: 14 Март 2008, 06:03:21 
http://www.webmagazine.biz/articles/cen … tical.html
f-anton Муж.
новый человек
15
Сообщения: 144
Зарегистрирован: 26.09.07
Сообщение Добавлено: 14 Март 2008, 09:14:12 
вот хороший пример выравнивания http://www.wpdfd.com/editorial/thebox/deadcentre4.html

_________________
В детстве хотел стать космонавтом, но потом меня укусил дизайнер...
_bg
новый человек
0
Сообщения: 49
Зарегистрирован: 11.07.04
Откуда: Эстония
Сообщение Добавлено: 7 Август 2008, 15:04:29 

f-anton писал(а):
f-anton

, спасибо за ссылку. Помогло.
tentoys Муж.
постоянный участник
121
Сообщения: 2940
Зарегистрирован: 06.08.02
Откуда: МКАДонутряк
Сообщение Добавлено: 8 Август 2008, 20:58:51 
некрофилы, извините.
:laugh: :beer:

_________________
Keep in touch. Andrey Alexeev.
*   Список форумов / Начинка и техника / Программирование для WWW « | » » ответить » создать топик
 Страница 1 из 1 [ Сообщений: 24 ] 
Показать сообщения за:   Поле сортировки  
Найти:
Перейти:  
Уровень доступа: Вы не можете начинать темы. Вы не можете отвечать на сообщения. Вы не можете редактировать свои сообщения. Вы не можете удалять свои сообщения. Вы не можете добавлять вложения.
cron


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