Горизонтальное изображение центра и нижней позиции в div

-3

Новый парень здесь. Я искал и нашел похожие проблемы, но не совсем то, что мне нужно.Горизонтальное изображение центра и нижней позиции в div

Я просто хочу знать, как горизонтально центрировать изображение внутри div, но также позиционировать изображение в нижней части div (20 пикселей или снизу, чтобы быть точным).

я могу получить вид внешний вид я после, установив контейнер DIV в качестве position:relative, и изображение position:absolute, с bottom:30px и margin-left: 49%. Я бы предпочел, чтобы это было точно, вместо использования левого края. Контейнер должен быть относительным для других элементов, которые у меня есть на странице.

Любая помощь будет принята с благодарностью. Благодарю.

источник

2016-10-13 Colin Stewart

Не могли бы вы отправить какой-нибудь связанный код? :/ –

Я думал, что объяснил это совершенно ясно, я не думал, что это обязательно. Это? Если это так, я обязательно буду в будущем. Если мой вопрос был проголосован исключительно за это, я очень удивлен. –

Слишком много раз ответит вопрос, а затем возвращается плакат и говорит: «О, моя разметка отличается от этого!» – Rob

Горизонтально центр и вертикально снизу ДИВ Click here

.parent { 
    position: relative; 
} 

.img { 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    margin: 0 auto; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

источник

2016-10-13 12:45:31

Спасибо! Работала отлично. Я пробовал это раньше (margin: 0 auto), но без левого и правого. Что конкретно это делает? –

@ColinStewart Чтобы сделать горизонтальный центр, мы используем margin: 0 auto; но мы его позиционируем. и если мы поместим какой-либо элемент, тогда он будет автоматически начинаться слева: 0; Поэтому, чтобы сделать его центром, используйте left: 0; право: 0; , Если бы это сработало для вас, то выложите его. –

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

центры абсолютного изображения внутри относительного DIV

div > img { 
    left: 50%; 
    transform: translateX(-50%); 
}

источник

2016-10-13 12:40:22 Barry127

Благодарим за ответ, он почти сработал, но не был полностью центрирован (чуть правее). –

В качестве альтернативы, вы можете комбинировать настройки left/right до нуля и настройки влево/вправо margin до auto:

.box { 
    position: relative; 
} 

.box img { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 2em; 
    margin: 0 auto; 
}

Демо: https://jsfiddle.net/ffyof90e/

Объяснение: Why does "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto" actually center?

источник

2016-10-13 12:58:00 paulflakstad

Делают это, как это, например:

<div id="divid"> 
<img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png" alt="Smiley face" height="42" width="42"> 
</div>

Теперь вы можете применить CSS следующим образом:

div > img { 
    display:block; 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 

} 

#divid{ 
    position: relative; 
    height: 300px; 
    width: 300px; 
    border: 3px solid #73AD21; 
}

Вы можете проверить на https://jsfiddle.net/n4528wxz/1/

источник

2016-10-13 13:03:55 Rocky2014

Горизонтальное изображение центра и нижней позиции в div

ответ

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