Картинка по центру. DIV или TABLE.

romanist · March 20, 2009

Подскажите пожалуйста, никак не могу разобраться. Как выровнять div с вложенным img по центру при любом разрешении монитора. Картинка 512 на 521, вложенная в div. Div при этом получается дочерним элементом окна браузера. Или такое просто невозможно и без таблицы не обойтись? Спасибо за помощь.

Edited March 20, 2009 by romanist

Veseloff · March 20, 2009

Т.е. надо картинку по центру выровнять? Тогда <div style="text-align: center;"><img src="qwrety.jpg"></div>

romanist · March 20, 2009

Т.е. надо картинку по центру выровнять? Тогда <div style="text-align: center;"><img src="qwrety.jpg"></div>

Спасибо. И еще - это по горизонтали, а как еще выравнивание того же объекта и по вертикали сделать.

3ABAPKA · March 20, 2009

http://htmlbook.ru/css/vertical-align.html

Veseloff · March 20, 2009

http://htmlbook.ru/css/vertical-align.html

Прокатит только в случае display: table-cell;

Автору: а почему бы не посмотреть здесь?

romanist · March 20, 2009

Ну никак не могу понять, как сделать вертикальное выравнивание картинки, находящейся в DIV'е.

Может кто нибудь пример кода напишет... Пожалуйста. Только что б при этом горизонтальное выравнивание не пропало.

Edited March 20, 2009 by romanist

Great Rash · March 20, 2009

Я бы сделал так:

img {
 position: relative;
 top: 50%;
 margin-top: -270px;
}

UPD: В общем вот код целиком:

<!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>
	<title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

<div style="width: 600px; height: 600px; border: #000 1px solid;">
	<img src="img.gif" style="position: relative; top: 50%; left: 50%; margin: -256px 0 0 -270px;" />
</div>

</body>
</html>

Edited March 20, 2009 by Great Rash

romanist · March 20, 2009

Код «Great Rash» совсем непонятный. У меня с этим кодом вообще бред какой то выходит.

Вобщем я решил так: блоки - это круто, но таблица рулит!!!

Вот мой код и все работает:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta
 content="text/html; charset=Windows-1251"
 http-equiv="content-type">
  <title>erererererere</title>
</head>
<body>
<table
 style="width: 100%; height: 100%; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
	<tr>
	  <td
 style="height: 100%; width: 100%; text-align: center; vertical-align: middle; white-space: nowrap;"><img
 style="width: 521px; height: 512px;"
 alt="просто пробная картинка" src="file:///C:/pic.jpg"></td>
	</tr>
  </tbody>
</table>
<br>
</body>
</html>

И все же: просто так это оставлять нельзя.

Задача то вроде - раз плюнуть... (Отцентрировать изображение по горизонтали и вертикали окна браузера) Однако.

А вот и не фига... Оказывается все на много сложнее.

Если кто знает, милости прошу

Предложите свой вариани кода. Может быть он рабочий?

Спасибо за внимание и понимание.

Edited March 20, 2009 by romanist

Great Rash · March 20, 2009

romanist Вы мой код пробовали запускать в отдельном файле? Он точно рабочий и бреда не должен выводить.

Victor Ananiev · March 20, 2009

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

а на счет кода, диву display:table-cell; vertical-align:middle; это первый вариант, и второй, дать картинке position:absolute; top:50%; margin-top:-половина высоты;

vanchelo · April 15, 2009

Так отцентрируется изображение в теге div (но оно будет фоном тега div) и по-вертикали и по-горизонтали

<div style="background:url() center no-repeat; width:200px; height:200px;"></div>

Так отцентрируется изображение в теге div (будет объектом внутри тега div) и по-вертикали и по-горизонтали

<div style="display: table-cell; vertical-align: middle; width:200px; height:200px;"><img src="" width="" height="" /></div>

Gamer · April 15, 2009

Вобщем я решил так: блоки - это круто, но таблица рулит!!!

Рулят прямые руки и знание семантики.

Вам сюда.

Edited April 15, 2009 by Gamer

Pogost · April 15, 2009

Вобщем я решил так: блоки - это круто, но таблица рулит!!!

попробуй использовать: {position: absolute

top: 50%;

left: 50%;

}

может поможет

Sign In

Картинка по центру. DIV или TABLE.

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information