Ширина Процент не центрирован

У меня небольшая проблема проектирования, и я не уверен, как это решить.

body {
	background-color: #000000 !important;
}

#container {
	position: relative;
}

#overlay {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%, -50%);
}
<div id="container">
  <img src="http://paralyzed.scork.net/img/splasher.png" class="img-fluid d-block mx-auto" id="splash" border="0" />
  <div id="overlay">
    <img src="http://paralyzed.scork.net/img/facebook.svg" alt="Facebook" border="0" width="40" />&emsp;
    <img src="http://paralyzed.scork.net/img/instagram.svg" alt="Instagram" border="0" width="40" />&emsp;
    <img src="http://paralyzed.scork.net/img/youtube.svg" alt="YouTube" border="0" width="40">
  </div>
</div>

jsfiddle

У меня есть основной образ и вы хотите наложить несколько значков социальных сетей. Все идет нормально. Но я бы хотел, чтобы они реагировали, используя процент в виде ширины / высоты. Как только я это сделаю, значки социальных сетей больше не сосредоточены, они перемещаются влево.

У вас есть идеи, как это решить? Работая над этим несколько часов и пробовал много вариаций, но ничего не работало для меня.

Моя цель - иметь большие значки на рабочем столе и меньше на мобильных устройствах.

html,css,

-1

Ответов: 1


0 принят

Изменены эти стили

    #container {
      position: relative;
      width: 100%;
    }

    img.abc {
      width: 100%;
    }

    #overlay {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
  width :100%;
  text-align: center;
}

Смотрите обновленную скрипку

body {
	background-color: #000000 !important;
}

#container {
	position: relative;
	width: 100%;
}

#overlay {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translateX(-50%);
  width :100%;
  text-align: center;
}
.bg-image {
  width: 100%;
}
#overlay-image {
	width: 10%;
}
		<div id="container">
			<img src="http://paralyzed.scork.net/img/splasher.png" class="img-fluid d-block mx-auto bg-image" id="splash" border="0" />
			<div id="overlay">
				<img src="http://paralyzed.scork.net/img/facebook.svg" alt="Facebook" border="0" id="overlay-image" />&emsp;
				<img src="http://paralyzed.scork.net/img/instagram.svg" alt="Instagram" border="0" id="overlay-image" />&emsp;
				<img src="http://paralyzed.scork.net/img/youtube.svg" alt="YouTube" border="0" id="overlay-image" />
			</div>
		</div>

HTML, CSS,
Похожие вопросы