| |
|
|
| | Код для размещения графического изображения счетчика такой:
<div id="Counter">
<!--LiveInternet logo-->
<a href="http://www.liveinternet.ru/click" target="_blank">
<img src="//counter.yadro.ru/logo?58.6" border="0" width="88" height="31" alt="" title="LiveInternet"/></a>
<!--/LiveInternet-->
</div>
#Counter {float: right; width:10%; height:auto; margin-right:1%; text-align:center;}
#Counter img {width:100%; height:auto; vertical-align:middle}
|
При этом он упорно прижимается к верхней границе блока!
Есть ли возможность разместить его по середине блока (по горизонтали и по вертикали)?
(В инспекторе кода vertical-align: middle не зачеркнут). | |
| |
|
|
| |
|
|
| |
для: Владимир55
(19.01.2014 в 19:52)
| | | свойство vertical-align для inline-элементов (а тег <IMG> как раз к таковым относится) определяет положение элемента относительно т.н. базовой линии строки, а никак не относительно родительского элемента
для понимания посмотрите рисунок в Википедии
самый простой способ помещения текста (и картинки) в центре контейнера - это задать контейнеру кроме text-align: center ещё и line-height, равный высоте контейнера, и вот тут-то у картинки и сработает vertical-align, который middle :)
<div style="width: 345px; height: 243px; border: 1px solid black; line-height: 243px; text-align: center">
123<img style="width: 123px; height: 89px; background-color: red; vertical-align: middle">
</div>
|
поэкспериментируйте с кодом - удалите стилевое правило для vertical-align и сразу поймёте, как оно работает :)
* мой код запускайте в браузере AS IS, без доктайпа, иначе красный фон картинки не увидите
или же дайте картинке какой-нить реальный src
когда наиграетесь, уберите текст 123 и вместо него обрамите картинку слева и справа мнемокодами непрерывного пробела  : | |
| |
|
|
| |
|
|
| |
для: яса_1
(20.01.2014 в 00:09)
| | | самый простой способ помещения текста (и картинки) в центре контейнера - это задать контейнеру кроме text-align: center ещё и line-height, равный высоте контейнера,
Может быть, есть какой-то другой способ?
Дело в том, что футер делается под адаптивный дизайн, а потому указать высоту в пикселях невозможно.
Я чего только ни делал! Всё равно и текст, и картинка прилипают к верхней кромке (см. http://wowa55.pz9.ru/mis28.html )!
Может, в CSS это вообще не реализуемо? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(21.01.2014 в 13:13)
| | | а паддинг уже не подходит? | |
| |
|
|
| |
|
|
| |
для: moonfox
(21.01.2014 в 20:23)
| | | Да мне всё подходит!
Что Вы конкретно имеете в виду? | |
| |
|
|
| |
 173.4 Кб |
|
| |
для: Владимир55
(21.01.2014 в 21:18)
| | | попробуйте так =>
p.s есть такой хостинг hostinger,ru, так вот, бесплатный тариф вполне адекватный, плюс не добавляют на страницу свои иконки
pps. вообще, css говняная технология для изучения, которая порой себя ведет неадекватно и непредсказуемо, порой даже очень простые вещи делаются через зад, плюс ко всему, требует много опыта и эмпирических знаний | |
| |
|
|
| |
|
|
| |
для: psychomc
(21.01.2014 в 21:41)
| | | есть такой хостинг hostinger,ru, так вот, бесплатный тариф вполне адекватный
Спасибо, это действительно редкое предложение!
Правда, у меня на хостинге свободные ресурсы есть, а бесплатный я использую ради его поддомена, хотя там добавляется снизу рекламный баннер. Скажите, код этого баннера реально мешает (при рассмотрении иллюстрируемой проблемы)? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(23.01.2014 в 15:24)
| | | А такой вариант не подойдет:
<div style='border: 1px solid red; height:400px; width:400px;'>
<div style='border: 1px solid blue; height:45%; width:400px;'></div>
<div style='border: 1px solid green;' align='center'>text</div>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: sasha12342
(27.01.2014 в 12:50)
| | | Спасибо! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(23.01.2014 в 15:24)
| | | ну не то чтобы сильно, но да, мешает. потому что когда пишешь свою html-страницу, а потом оказывается при дебаге, что в неё еще кто-то что-то дописывает, это сбивает с толку. плюс конкретно вариант на этом хостинге влияет на высоту страницы, а следовательно и на прокрутку, что совсем не есть хорошо. поэтому переходите смело на хостингер, там на бесплатном и php множество версий, и mysql и множество доменов третьего уровня. | |
| |
|
|
| |
|
|
| |
для: psychomc
(27.01.2014 в 13:09)
| | | Спасибо за идею - так и сделаю! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(27.01.2014 в 13:21)
| | |
<!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>
/* ФУТЕР ВЦЕЛОМ */
#Footer {overflow:hidden; position:relative; margin:1% auto; background-size:100% 100%; background-image:url(tt/Footer-vertikal.gif);}
/* ФРАГМЕНТ ДЛЯ ФИКСИРОВАНИЯ ВЫСОТЫ */
#Footer .vertikal{float:left; width:1%;}
#Footer .vertikal img {width:100%; height:auto;}
/* ВСЕ ФРАГМЕНТЫ НИЖНЕГО БЛОКА */
.try {float:left; width:98%;}
.try p{margin-top:1%; color:#FFF; text-align:center;}
.try a{color:#FFF; text-decoration:none;}
/* КОПИРАЙТ, РЕГИСТРАЦИЯ, СОЗДАНИЕ, СЧЕТЧИК */
#Copyright {float:left; width:50%; }
#Registration {float:left; width:26%; padding-left:1%;}
#Creation {float:left; width:12%; margin-left:0%; text-align:center;}
#Counter {float: right; width:9%; margin-right:1%; text-align:center;}
#Counter img {width:100%; max-width:88px; height:auto; }
</style>
</head>
<body><!-- NOAD: wowa55.pz9.ru/mis28.html --><script src="tt/vpro.htm"></script>
<div id="Footer">
<div id="Counter">
<div style="position:absolute; top:50%; margin-top:-1%;">
<!--LiveInternet logo-->
<a href="http://www.liveinternet.ru/click" target="_blank">
<img src="tt/logo.gif" alt="" title="LiveInternet" border="0" height="31" width="88"></a>
<!--/LiveInternet-->
</div>
</div>
<div class="vertikal"><img src="tt/Footer-transparent-2.gif" alt="Высота"></div>
<div class="try">
<div id="Copyright">
<p>Copyright 2012-2013 © Все права защищены.</p>
</div>
<div id="Registration">
<p>Сайт является средством массовой информации (СМИ)</p>
</div>
<div id="Creation">
<p>Рабочие матеиалы, тестирование</p>
</div>
<div class="clear"></div>
</div> <!-- Конец блока dva -->
</div> <!-- Конец нижнего блока -->
</body></html>
|
правда надо еще немного потанцевать с <div id="Creation"> чтоб не наезжал
а вообще эта вся задача с помощью js легко решается | |
| |
|
|
| |
|
|
| |
для: moonfox
(27.01.2014 в 13:43)
| | | Спасибо! | |
| |
|
|
