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

Question

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

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

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

HTML, CSS,

Похожие вопросы

score 0 · Accepted Answer

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>