Расположение вещей внутри DIV (связанных с CSS)

Question

я постараюсь сделать мой вопрос действительно простым 2 you

По сути, у меня есть DIV, в котором у меня есть картинка

Какие стили CSS я должен применить к изображению, чтобы правильно расположить его внутри div при условии, что каждый раз, когда я изменяю размер окна браузера, он остается там (внутри div) на одном и том же расстоянии от границ

Извините, что потратил ваше время, но я все еще новичок, которому нужна помощь, большое спасибо!

ПРИМЕР ЗДЕСЬ

код

HTML

<div id="super_div">
<img id="eyes" src="images/eyes.png" />
</div>

1022 * CSS *

that's the question :)

Answer 1

Вам нужно взглянуть на абсолютное позиционирование. Сначала вы устанавливаете атрибут позиции содержащего элемента div на относительный. Например:

#super_div
{
  position: relative;
}

Затем вы устанавливаете свойство position изображения на absolute и используете свойства top и left или right для помещения его в родительский div. Так, например:

#eyes
{
  position: absolute;
  top: 20px;
  left: 20px;
}

Вот так вы заставляете изображение сохранять свое текущее положение, несмотря ни на что. Вот ссылка на статью, объясняющую основы. Надеюсь, это поможет.

Answer 2

Это сделает его горизонтально отцентрированным:

margin:auto;

Если вам нужно, чтобы он был также центрирован вертикально, то все становится немного сложнее.Вы можете прибегнуть к таблицам, использовать фоновое изображение (если это соответствует вашей ситуации) или возиться с CSS.Я использовал код на http://css -tricks.com / snippets / css / absolute-center-вертикальный-горизонтальный-an-image / в качестве основы для решения аналогичной ситуации, которую я имел некоторое время назад ..