Выравнивание по центру изображения с absolute

Elmirill · August 29, 2010

Здравствуйте!

В верстке новичок, возникла необходимость выровнять картинку с position:absolute по центру. Кроме этого, картинка вписана в окно браузера, и масштабируется с сохранением пропорций. Если убрать absolute, получается выровнять с помощью text-align:center; Но без absolute она некорректно отображается в опере, ие и мозилле.

Помогите советом.

Код:

*{padding: 0; margin: 0;}

body, html {height: 100%;}

#soon {

/* Set rules to fill background */

height: 100%;

min-width: 640px;

min-height: 480px;

/* Set up proportionate scaling */

height:100%;

/* Set up positioning */

z-index: -1;

position: absolute;

}

</STYLE>

</HEAD><BODY>

</BODY></HTML>

Searcher · August 30, 2010

1. Обрамляйте код публикуемый тут в спецтэги при помощи кнопочки "код" над формой ввода.

2. Что именно некорректно отображается без absolute? Попробуйте убрать absolute, поставить display:block; и margin: 0 auto;

3. По спецификации нельзя помещать строчный элемент прямо в body, нужен обрамляющий блочный элемент.

3. Вот так вроде все корректно:

<!DOCTYPE html>
<html>
<head>
   <title></title>

<style type="text/css">
*{padding: 0; margin: 0;}

body, html {height: 100%;}

#container {
	height:100%;
}

#soon {
/* Set rules to fill background */
display: block;
margin: 0 auto;
min-width: 640px;
min-height: 480px;

/* Set up proportionate scaling */
height:100%;

/* Set up positioning */
z-index: -1;
}
</style>
</head>

<body>
	<div id="container">
		<img id="soon" src="img/bg.jpg">
	</div>
</body>
</html>

Elmirill · August 30, 2010

Searcher, спасибо, вопрос решен.

Насчет обрамления кода - учту.

Edited August 30, 2010 by Elmirill

Sign In

Выравнивание по центру изображения с absolute

Question

Elmirill

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Elmirill

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information