Картинка в центре DIV

Gold Dragon · September 16, 2011

Имеется картинка всегда разной шириной и высотой. Контейнер шириной IMG+отступы, высота разная.

Как мне расположить картинку ровно по центру DIV?

ShumNo · September 16, 2011

text-align: center;

Gold Dragon · September 16, 2011

виноват. наверное не очень правильно объяснил.. вот картинка что должно получится

DIV2 - это контейнер который может быть любой высоты

Картинка должна быть по центру и по высоте и по ширине...

sigma77 · September 16, 2011

Gold Dragon,

http://tinyurl.com/387bjvk

ShumNo · September 16, 2011

виноват. наверное не очень правильно объяснил.. вот картинка что должно получится
DIV2 - это контейнер который может быть любой высоты
Картинка должна быть по центру и по высоте и по ширине...

display: table-cell; но с ослом будут проблемы, решений в гугле хватает

либо таблицу вставить

Justnewone · September 16, 2011

Кроме table-cell можно еще нагуглить "выравнивание по высоте кроссбраузерно", кроме решения с JS (экспрешн) еще еще чисто версточное.

Если нет проблем с выводом на печать или индексацией самой картинки, можно выводить картинки не тегом img а бекграундом для DIV1 с позишн 50% 50%, DIV1 тем самым можно разместить абсолютно, с top и bottom по нулям, без указания высоты.

Gold Dragon · September 19, 2011

можно выводить картинки не тегом img а бекграундом для DIV1 с позишн 50% 50%, DIV1 тем самым можно разместить абсолютно, с top и bottom по нулям, без указания высоты.

Кстати, совсем не подумал, а решение мне нравится, и даже долее подходит.. Попробую. В принципе и при смене я думаю проблем не возникнет, jQuery вроде хорошо с этом работает..

ps

sigma77, отвлечённый вопрос.. А зачем нужен этот форум? Представь, я нахожу ссылку в гугле, перехожу на ответ, а в ответе написано "Погугли"... Я пришёл на специализированный форум, чтобы разобраться и получить ответ. Если это всего-лишь "посылательный и отсылочный" форум, то прошу прощения и поищу другие форумы

sigma77 · September 19, 2011

sigma77, отвлечённый вопрос.. А зачем нужен этот форум? Представь, я нахожу ссылку в гугле, перехожу на ответ, а в ответе написано "Погугли"... Я пришёл на специализированный форум, чтобы разобраться и получить ответ. Если это всего-лишь "посылательный и отсылочный" форум, то прошу прощения и поищу другие форумы

Основной целью форума является обмен опытом между его участниками.

Заметь, не для выполнения за участником его работы, не для выполнения другим участником функции гугла.

Помните, тут не делают работу за вас, тут помогают в изучении технологий и обмениваются опытом.

Далее. Представила. И что дальше?

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

Даже на этом форуме, если поискать можно найти как минимум 2 темы с готовыми решениями.

Это не тот случай, где ты наткнешься на "гугли". По запросу по первым же ссылкам находится несколько вариантов решения. Именно подобные темы и засоряют и затрудняют поиск.

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

Vlad · September 19, 2011

Ищите другие форумы.

Gold Dragon · September 19, 2011

Да неужели я не Гуглил? Всё что находил везде фиксированные размеры. А у меня высота как картинки, так и контейнера динамическая.. Да и код выложить не могу, так как даже не знаю с чего начать.

Самое простое это использовать таблицу или фон

Edited September 19, 2011 by Gold Dragon

Myuzik · September 19, 2011

а если картинку задавать как background: url() center center no-repeat; ?

Gold Dragon · September 19, 2011

ага, по этому пути сейчас и иду.. Но действительно, вдруг понадобится манипулировать картинкой, а с background это не совсем удобно делать..

Сейчас накидаю всё, а уж по ходу буду разбираться что и где не работает

Gold Dragon · September 22, 2011

вот вроде нашёл простое решение, вроде везде работает

<!DOCTYPE html>
<html>
<head>
	<style>
		#q0{
			display:table;
			width:100%;
		}
		#q1{
			display:table-cell;
			vertical-align:middle;
			text-align:center;
		}
	</style>
</head>
<body>
<div id="q0">
	<div id="q1">
		<img src="ajax-loader.gif"/>
	</div>
	<div id="q2">
		начало
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		конец
	</div>
</div>
</body>
</html>

но теперь я не могу ограничить левый контейнер максимальной шириной. Я так понял max-width уже не работает.

Myuzik · September 22, 2011

IE до 9 не понимает display: table-cell;

sigma77 · September 22, 2011

IE до 9 не понимает display: table-cell;

ИЕ понимает table-cell начиная с ИЕ8

Gold Dragon · September 22, 2011

в том то и дело что не все любят table-cell. А как быть?

Sign In

Картинка в центре DIV

Question

Link to comment

Share on other sites

15 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

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