X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Центрирование по вертикали
vit84
vit84
Topic Starter сообщение 5.5.2009, 17:04; Ответить: vit84
Сообщение #1


Как создать блок размером 200 на 200 и поместить внутри блока картинку так, что бы она всегда была по центру как вертикально, так и горизонтально? Весь блок должен быть ссылкой.
Очень прошу поделиться ПРОВЕРЕННЫМ кодом.
P.S. Таблицы не предлагать, так как в FF таблица в ссылке глючит.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 5.5.2009, 17:25; Ответить: klenovnn
Сообщение #2


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="RU">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Вариант 1</title>
<style>
* {margin:0; padding:0;}
a img {border:0 none;}
div#s-body {
border:1px solid #000;
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
</style>
</head>
<body>

<div id="s-body">
<a href="#"><img src="#" height="200px" width="200px" />1</a>
</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vit84
vit84
Topic Starter сообщение 5.5.2009, 17:31; Ответить: vit84
Сообщение #3


Выравнивание не блока в окне, а картинки в блоке. Картинка меньшего размера.
Спасибо за ответ, вижу что-то полезное, попробую применить к своему случаю.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vit84
vit84
Topic Starter сообщение 5.5.2009, 17:33; Ответить: vit84
Сообщение #4


(' post='31804 @ 5.5.2009, 20:25)
margin-top:-100px;
margin-left:-100px;

Не получается, так как размер картинки зарание не известен
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 5.5.2009, 18:24; Ответить: klenovnn
Сообщение #5


Ну и укажи размер картинки любой. Блок то по центру все равно будет. в диве укажи еще vertical-align:top; text-align:center;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vit84
vit84
Topic Starter сообщение 5.5.2009, 18:48; Ответить: vit84
Сообщение #6


vertical-align:top; text-align:center; точно не применится ни к картинке ни к DIV'у
Если в DIV (200x200) вставить картинку (20x20), то она явно будет не в средине DIV'а
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Apay
Apay
сообщение 5.5.2009, 19:41; Ответить: Apay
Сообщение #7


немного поправил
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="RU">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Вариант 1</title>
<style type="text/css">
div#s-body {
border:1px solid #000;
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
cursor: pointer;
background: url('/any/path/image.jpg') no-repeat center center;
overflow: hidden;
padding: 0px;
}
div#s-body a { margin: 0px; padding: 0px; }
div#s-body a img {border: none; }
</style>
</head>
<body>
<div id="s-body">
<a href="#"><img src="empty.gif" height="200" width="200" alt="" /></a>
</div>
</body>
</html>
empty.gif - прозрачная картинка в 1 пиксел
/any/path/image.jpg - ваша картинка
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vit84
vit84
Topic Starter сообщение 5.5.2009, 19:59; Ответить: vit84
Сообщение #8


Спасибо, Apay! Реально ответил по делу и выручил! Респект, шаришь! Может еще это глянешь?
http://www.html.by/showthread.php?p=31273

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Kadam.net - Промышленные объемы трафика под все вертикали | 90% отчисления паблишерам!
 2 support_kadam 1803 18.4.2022, 16:40
автор: support_kadam
Открытая тема (нет новых ответов) Не могу текст отцентрировать по вертикали в div
 8 elena0222 9847 27.5.2013, 13:36
автор: -gen-5-
Открытая тема (нет новых ответов) выравнивание по вертикали ресайз окна или меньшее разрешение
 7 shark255 6520 20.1.2013, 15:58
автор: -magix-coder-
Открытая тема (нет новых ответов) картинка в центре блока по вертикали
 1 adax 6972 19.9.2012, 0:02
автор: -adax-
Открытая тема (нет новых ответов) Помогите отцентрировать по вертикали названия категорий товаров.
 1 margo_hb 6336 26.4.2012, 4:52
автор: -DelphinPRO-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 16.4.2024, 17:11

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet