Div начальной загрузки фоновой позиции

Question

вопрос

У меня проблемы с этим макетом. Я хочу разместить изображение приложения прямо в центре этих полей. важно, чтобы изображение было видно сверху и снизу фона для разделов с текстом. Я пробовал все как в качестве фона, так и в качестве обычного изображения (положение, z-индекс и т. Д.). Я использую бутстрап для столбцов и рядов. Мне также нужно, чтобы это выглядело красиво на мобильном телефоне. Мне нужен дизайн, чтобы посмотреть на прикрепленную картинку, но с картинкой посередине перед фоном. Есть предложения?

Текущий код и CSS:

<center> 
<div class="margin50">
<section class="appfeatures section-spacing">
<div class="container_appfeatures">
<div class="row">
    <div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-1 text-left"><img class="appicon_white" src="img/createtip_white.png" alt="Opret Tip Ikon"></div>
    <div class="col-md-offset-4 col-md-1 text-right"><img class="appicon_white" src="img/rank_white.png" alt="Rank List Ikon"></div>
    <div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-1 text-left"><img class="appicon_white" src="img/feed_white.png" alt="Live Score Ikon"></div>
    <div class="col-md-offset-4 col-md-1  text-right"><img class="appicon_white" src="img/profile_white.png" alt="Eksperter Ikon"></div>
    <div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>

</div>
</div>
</section>
</div>
</center>


.appicon_white {
width: 60px;
height: 60px;
    }

.appfeatures {

background: rgb(102,204,153);
background: linear-gradient(180deg, rgba(102,204,153,1) 0%, rgba(30,130,76,1) 100%);
opacity: 0.5;
}


.container_appfeatures {
width: 80%;

}



.margin50 {
margin-top: 75px;
margin-bottom: 75px;
width:100%; 
height:100%;
background-image: url("../img/profile.png");
background-repeat: no-repeat;
background-position: center center;
padding-top:95px;
padding-bottom:95px;
}

Answer 1

Не используйте col-md-offset-4, просто col-md-4, и вы должны использовать <div class="row"> в каждом ряду. Здесь я обновил ваш HTML-код:

<center>
    <div class="margin50">
        <section class="appfeatures section-spacing">
            <div class="container_appfeatures">
                <div class="row">
                    <div class="col-md-3 col-sm-3 text-right">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/createtip_white.png" alt="Opret Tip Ikon">
                    </div>
                    <div class="col-md-4"> </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/rank_white.png" alt="Rank List Ikon">
                    </div>
                    <div class="col-md-3 col-sm-3 text-left">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                </div>
                <img src="https://path to your iphone image">
                <div class="row">
                    <div class="col-md-3 col-sm-3 text-right">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/feed_white.png" alt="Live Score Ikon">
                    </div>
                    <div class="col-md-4"> </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/profile_white.png" alt="Eksperter Ikon">
                    </div>
                    <div class="col-md-3 col-sm-3 text-left">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                </div>
            </div>
        </section>
    </div>
</center> 

Обновлен код CSS:

.appicon_white {
    width: 40px;
    height: 40px;
}

.appfeatures {
    background: rgb(102, 204, 153);
    background: linear-gradient(180deg, rgba(102, 204, 153, 1) 0%, rgba(30, 130, 76, 1) 100%);
    opacity: 0.5;
    margin: 170px 0;
    position: relative;
}

.container_appfeatures {
    width: 80%;
    margin: 75px auto;
}

.margin50 {
    width: 100%;
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.margin50 img {
    max-width: 250px;
    width: 100%;
}

img.phone-middle {
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Jsfiddle: https://jsfiddle.net/marksalvania/94uyLvp1/

затем на вашем мобильном / маленьком представлении просто добавьте это в ваши медиа-запросы примерно так:

.col-md-3 {
    text-align:left;
    font-size: 10px; /*just adjust this to your desired size*/
}

.col-md-1,
.margin50 {
    display:none; /*this is just optional if you just want hide icons on mobile view. Much better if you will hide the phone image on mobile view for sleek and clean layout.*/
}

.your-other-styles {
    /*add your other styles here*/
}