позиционирование элемента по центру не зная его размеров

clgs · October 26, 2011

Добрый день.

Подскажите пожалуйста, как с позиционировать элемент по центры относительно горизонтали и вертикали, не зная его размеров.

Структура такая:


li{position:relative;float:left;padding:0;margin:0;overflow:hidden;width:100px;height:100px;background:none}
img{display:block}
<li><img ... /></li>

я придумал только следующее: оставляем как есть, т.е. <img> не трогаем, но скрываем его, а у <li> делаем беграунд из такой-же картинки что и в <img>, и уже этот беграунд позиционируем.

ceil100 · October 26, 2011

какой именно элемент нужно позиционировать?

clgs · October 26, 2011

какой именно элемент нужно позиционировать?

img относительно li. т.е. li имеет размеры 100х100px , а img чуть больше, вот надо его и сделать так, чтоб был виден центр картинки, а не края.

ceil100 · October 26, 2011

способ до которого вы додумались и есть самый правильный и простой

у вас картинка, ссылка что-ли?

clgs · October 26, 2011

у вас картинка, ссылка что-ли?

да

ceil100 · October 26, 2011

можно так сделать, если очень надо


img {
    position: relative;
    left: -50%;
    top: -50%;
}

position можно и absolute сделать

только не стоит этим злоупотреблять, элемент все таки из потока выпадает

Edited October 26, 2011 by ceil100

clgs · October 26, 2011

можно так сделать, если очень надо
img {
    position: relative;
    left: -50%;
    top: -50%;
}

Получается не то что надо.


ul{list-style: none outside none}
li{position:relative;float:left;padding:0;margin:0;overflow:hidden;width:100px;height:100px;background:none}
li img{display:block;position:relative;left:-50%;top:-50%;}


<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=1274, user-scalable=no">
<link type="text/css" href="style.css" rel="stylesheet" />
<body>
<ul>
<li><a href="#"><img alt="alt" title="title" src="img.jpg"></a></li>
<li><a href="#"><img alt="alt" title="title" src="img.jpg"></a></li>
<li><a href="#"><img alt="alt" title="title" src="img.jpg"></a></li>
<li><a href="#"><img alt="alt" title="title" src="img.jpg"></a></li>
<li><a href="#"><img alt="alt" title="title" src="img.jpg"></a></li>
</ul>
</body>
</html>

Edited October 26, 2011 by clgs

ceil100 · October 26, 2011

картинки наверное разных размеров?

можешь так сделать

ul{list-style: none outside none}
	li{position:relative;padding:0;margin:0;overflow:hidden;width:100px;height:100px;}
	img{width:100%;display:block;position:relative;}

картинки будут размером как li

будут в него вписываться и не выходить за его пределы

Edited October 26, 2011 by ceil100

clgs · October 26, 2011

картинки наверное разных размеров?

Картинки одинаковых размеров. но получается слудующее

надо так как отмечено зеленым (т.е. четко по центру)

2ceil100, изменять размеры картинки таким способом не хорошо)

остановлюсь на том что придумал с самого начала) спасибо за ответ) но готов выслушать еще советы.

Edited October 26, 2011 by clgs

ceil100 · October 26, 2011

если они одинаковые, то позиционирование в пикселях задайте, или сделайте как я написал выше

т.е. впишите картинку в li

хорошо не хорошо, главное результат, не?

clgs · October 26, 2011

хорошо не хорошо, главное результат, не?

не хорошо тем что, при таком подходе качество картинки значительно ухудшается. качество отображения в браузере.

Sign In

позиционирование элемента по центру не зная его размеров

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information