Вот код:
div.item {
margin: 5px auto;
display: block;
height: 75px;
width: 60px;
}
// Первый вариант (не работает)
div.item div {
height: 75px;
display: block;
text-align: center;
vertical-align: middle;
}
// Второй вариант (не работает)
div.item div {
display: block;
text-align: center;
margin: 0 0 auto auto;
}
// Третий вариант (не работает)
div.item div img {
margin: 0 0 auto auto;
max-height: 72px;
}
<?php
...
echo '
<div class="item">
<div><a href="?xxx='.base64_encode($row['xxx']).'"><img src="'.$yyy.'" /></a></div>
</div>';
...
?>
Подскажите, пожалуйста, как мне разместить по центру вертикали изображение, размер которого не фиксированный.
То есть, мне нужно, чтобы изображение было четко в центре квадрата (прямоугольника)
Спустя 4 часа, 11 минут, 49 секунд (22.04.2011 - 16:19) Snus написал(а):
Все сдулись чтоли?
А то мне пришлось пока быдлокодом заюзаться
Подскажите, как можно решить этот вопрос средствами css
А то мне пришлось пока быдлокодом заюзаться
<?php
...
echo '
<div class="item">
<div style="padding-top: '.(($iHeight < 72) ? ((72 - $iHeight) / 2) : 0).'px;"><a href="?xxx='.base64_encode($row['xxx']).'"><img src="'.$yyy.'" /></a></div>
</div>';
...
?>
Подскажите, как можно решить этот вопрос средствами css
Спустя 2 часа, 1 минута, 27 секунд (22.04.2011 - 18:20) alex12060 написал(а):
<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Задайте вопрос, получите ответ по вопросам поступления в УТЖТ - филиал ПГУПС в 2011 году" />
<meta name="keywords" content="programming,web,веб,все для web мастера,все для wordpress,все для создания блога,плагины для wordpress,программирование,расширенная регистрация пользователей,вопрос,ответ, утжт,2011,поступление,учеба,жизнь,деньги,поступить,идеально" />
<style type="text/css">
div.item {
margin: 5px auto;
padding: 3px 4px 3px 5px;
display: block;
height: 70px;
width: 70px;
border: 1px #666 solid;
background-color: #ccc;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
</head>
<body>
<div class="item">
<img src="http://freelance.ru/avatars/70/70046.png" />
</div>
</body>
</html>
Так что-ли?
Спустя 1 час, 15 минут, 13 секунд (22.04.2011 - 19:35) nugle написал(а):
Snus
div это блочный элемент! К блочным элементам не приемлимо vertical-align
В твоём случае есть 2 пути:
1 путь:
менять блочный элемент на строковой, т.е. display:inline; вот я точно не помню можно попробывать inline-block!
и 2 путь:
только паддинги и margin! иначе никак!Сам когда то задался таким вопросом, но ответа тогда кроме мэргинов не нашёл, а после книженции многое стало понятно!
div это блочный элемент! К блочным элементам не приемлимо vertical-align
В твоём случае есть 2 пути:
1 путь:
менять блочный элемент на строковой, т.е. display:inline; вот я точно не помню можно попробывать inline-block!
и 2 путь:
только паддинги и margin! иначе никак!Сам когда то задался таким вопросом, но ответа тогда кроме мэргинов не нашёл, а после книженции многое стало понятно!
Спустя 3 минуты, 52 секунды (22.04.2011 - 19:39) sharki написал(а):
Snus
Сегодня я выравнивал див блок процентами, как вариант
margin: 20% auto 0 auto;
Там проценты сам урегулируешь
Сегодня я выравнивал див блок процентами, как вариант
margin: 20% auto 0 auto;
Там проценты сам урегулируешь
Спустя 29 минут, 19 секунд (22.04.2011 - 20:08) inpost написал(а):
Snus
Таблицей вставь, вместо дива
Таблицей вставь, вместо дива
Спустя 1 час, 36 минут, 28 секунд (22.04.2011 - 21:45) Snus написал(а):
alex12060
Нет, ты мне показал пример, где блок имеет размер 70на70 и изображение того же размера. Во-вторых - мне нужно не блок выравнять, а то, что находится внутри него.
nugle
Ты сам пробовал этот вариант? (сталкивался с решением поставленной мною задачей?). Просто скажу - не помогает.
sharki
Проценты не катят потому как я указал в первом посте
Нет, ты мне показал пример, где блок имеет размер 70на70 и изображение того же размера. Во-вторых - мне нужно не блок выравнять, а то, что находится внутри него.
nugle
Ты сам пробовал этот вариант? (сталкивался с решением поставленной мною задачей?). Просто скажу - не помогает.
sharki
Проценты не катят потому как я указал в первом посте
| Цитата (Snus @ 22.04.2011 - 09:07) |
| разместить по центру вертикали изображение, размер которого не фиксированный. |
inpost
Не вариант
Я не хочу банальные вещи делать при помощи таблиц и php. Потому как я делаю резиновый сайт (прихоть заказчика)На картинке видно блоки item, нутри них как я показал кодом выше. Изображения могут быть и 72Пкс высотой и меньше...
Спустя 16 часов, 18 минут, 20 секунд (23.04.2011 - 14:03) nugle написал(а):
вот это точно сработает
<!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=utf-8" />
<title>Документ без названия</title>
<style>
.item{
margin-left:20px;
display: block;
height: 200px;
width: 200px;
}
.item div{
display:inline-block;
vertical-align:middle;
}
.helper {
display:inline-block;
vertical-align:middle;
height:100%;
width:0px;
}
</style>
</head>
<body>
<div class="item">
<div><img src='../img/new.png'></div>
<div class="helper"></div>
</div>
</body>
</html>
Спустя 21 час, 59 минут, 51 секунда (24.04.2011 - 12:03) Snus написал(а):
nugle
Кроусаучег! Держи +
Кроусаучег! Держи +
Спустя 3 часа, 9 минут, 57 секунд (24.04.2011 - 15:13) inpost написал(а):
Snus
А у меня будет работать в моём ИЕ7 ? Кажется там block-inline плохо работает.
А у меня будет работать в моём ИЕ7 ? Кажется там block-inline плохо работает.