Не может центрировать изображение жидкости в жидкости Div

У меня проблема с горизонтальным центрированием жидкого изображения в жидком div. От взгляда высоко и низко, решения, которые другие нашли, не работают на меня, либо я пытаюсь сделать что-то слишком сложно (я сомневаюсь), либо я работаю с другой средой.Не может центрировать изображение жидкости в жидкости Div

HTML:

<body> 
    <div id="BackgroudDiv"> 
    <img src="images/NumberTwo.png" alt="" id="FSBG"/> 
    </div> 
</body>

CSS:

body { 
    margin: 0px 
} 
#FSBG { 
    width: auto; 
    height: 100%; 
    min-width: 1040px; 
    position: absolute; 
    min-height: 585px; 
} 
#BackgroudDiv { 
    width: 100%; 
    height: 1080px; 
    text-align: center; 
    display: block; 
    background-color: #BF2527; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
}

"Margin: авто" не делает ничего, как ширина всего является переменной. В коде, как он есть, левый край изображения «NumberTwo» центрируется на странице. Я хочу, чтобы центр изображения был центрирован. Он ведет себя так же, как и масштабирование, но не в середине страницы!

Любая помощь будет оценена по достоинству, это привело меня к стене. Дайте мне знать, нужна ли дополнительная информация.

источник

2015-06-13 HCAWN

Вам нужно только удалить position: absolute; в img:

#FSBG { 
    width: auto; 
    height: 100%; 
    min-width: 1040px; 
    min-height: 585px; 
}

DEMO: https://jsfiddle.net/3w5rqg3d/1/

источник

2015-06-13 22:39:15 lmgonzalves

А, я пробовал это, но тогда изображение не соответствовало масштабируемым «правилам», которые я установил, изменив BackgroudDiv на 100% высота вместо заданной высоты заставляет все работать. Большое спасибо – HCAWN

Еще одна вещь, если вы: Когда соотношение сторон окна будет слишком узким, я хотел бы, чтобы стороны изображения отрезали, а не только правую сторону (что происходит сейчас), любое дополнение, чтобы сделать это возможным? – HCAWN

Взгляните на [это демо] (https://jsfiddle.net/lmgonzalves/3w5rqg3d/3/), используя код из [этого другого ответа] (http://stackoverflow.com/a/30770629/4908989). – lmgonzalves

Как вы используете позиции абсолютной, вам необходимо установить сверху, справа и слева 0px; и затем вы можете добавить маржирование слева и справа от поля.

Пример - https://jsfiddle.net/zvbn2fak/

top:0px; 
left:0px; 
right:0px; 
margin-left:auto; 
margin-right:auto;

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

источник

2015-06-13 22:38:35

Решение lmgonzalves Решение для меня, но спасибо за то, что вы нашли время, чтобы ответить :) – HCAWN

Вы можете использовать flexbox, но будьте осторожны, что Flexbox не поддерживается в старых браузерах.

#backgroundDiv { 
    display: flex; 
    justify-content: center; 
}

И все. justify-content выравнивает элементы внутри в flexbox по направлению к гибкому. Я не уверен, работает ли он на position: absolute предметах, но вы можете проверить это.

Примечание: Я оставил префиксы поставщиков для краткости, но вам, вероятно, придется добавить их, чтобы получить желаемый эффект в браузерах.

источник

2015-06-13 22:41:10 Achrome

lmgonzalves Решение работает для меня, но спасибо, что нашли время ответить :) – HCAWN

Не может центрировать изображение жидкости в жидкости Div

ответ

Смежные вопросы