CSS | слой нескольких центрированных div в столбцах Bootstrap

Я хотел бы 3 отзывчивых столбца в разделе, где «.service-icon» находится в центре каждого столбца. У меня есть изображение для фона столбца (dirtcolumn.png, но его можно заменить полноразмерным div... все, что я хочу, - это центрировать его внутри div/столбца). Вы можете увидеть, где возникает проблема на моем первом сайте в первом разделе под обложкой ----> САМЫЙ ПОСЛЕДНИЙ СКРИНШОТ – http://aleven.netne.net/CDH/

HTML: (после организации каждой разметки, о которой я мог подумать, включая предоставление всех классов div col-md-4 col-xs-4 ETC. ETC.)

    <section id="services">
   <div class="container-fluid">
    <div class="row">
    <div class="columndirt col-md-4 text-center">
    <div class="service-icon">
    <div class="icon-daycare">
        </div>
        </div>
    </div>


    <div class="columndirt col-md-4 text-center">
    <div class="service-icon">
    <div class="icon-daycare">
        </div>
        </div>
    </div>



    <div class="columndirt col-md-4 text-center">
    <div class="service-icon">
    <div class="icon-daycare">
        </div>
        </div>
    </div>

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

CSS:

#services {
background-color: #291501;
/*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
padding: 0px 0;
padding-bottom: 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center center;
position: relative;
min-height: 590px;
display: block;
vertical-align: middle;
position: relative;

}
.columndirt {

float: none;
margin: 0 auto;




background-image: url(../images/cdh/newheader/ps/dirtcolumn.png);
background-size: cover;

background-repeat: no-repeat;
background-size: 70% 100%;
top:0;
bottom:0;
max-height: auto;
max-width: 37%;
min-width: 37%;
background-position: center center;
text-align: center center;
vertical-align: middle;
position: absolute;


}
.service-icon {
float: none;
margin: 0 auto;
margin: 158px;
margin-top: 180px;
border-radius: 100%;
background-color: #6d4827;
background-image: url(../images/cdh/newheader/ps/dots.png);
background-size: 1500px;
display: inline-block;
font-size: 36px;
height: 170px;
line-height: 170px;
width: 170px;  
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
vertical-align: middle;


}
.icon-daycare {
vertical-align: middle;
color: #9f6c43;
display: inline-block;
max-width: 100%;
min-height: 50%;
min-width: 100%;
background-image: url(../images/cdh/newheader/ps/daycareicon.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;

}
}

html css twitter-bootstrap responsive
person Alex Schoeneck    schedule 28.04.2016    source источник
comment
Я не нашел никаких проблем в ссылке, которую вы предоставляете. Можете ли вы объяснить свою проблему со снимком экрана?   -  person devfaysal    schedule 28.04.2016
comment
@MeFaysal Я обновил снимок экрана. Я бы хотел, чтобы столбцы грязи располагались по центру за служебными значками. по какой-то причине появится только один или вообще ничего .... я бы хотел все 3.   -  person Alex Schoeneck    schedule 28.04.2016
comment
Вы пробовали класс Bootstrap text-center в том же div, что и ваш col-md-4? Он будет центрировать весь контент внутри div.   -  person Tricky12    schedule 28.04.2016
comment
вы хотите что-то вроде этого? imgur.com/CXuMZBi   -  person devfaysal    schedule 28.04.2016
comment
@MeFaysal близко. я хотел бы еще один div/изображение внутри кругов. похож на значок зеленого дома в моем примере. И я хотел бы, чтобы белые поля были на всю высоту родителя/раздела.   -  person Alex Schoeneck    schedule 29.04.2016
comment
@ Tricky12 Да, но это ничего не сделало. Однако я удалил div=col-md-4 и поместил col-md-4 в div=columndirt. Как видно из недавно отредактированной разметки. Теперь все столбцы размещаются непосредственно друг за другом, а не в сетке. Таким образом, кажется, что вы видите только 1 столбец, потому что они сложены.   -  person Alex Schoeneck    schedule 29.04.2016
comment
Я думаю, что это может быть проблема с позиционированием ... но не могу понять ... также text-center делает его отзывчивым только для больших / средних размеров экрана (изменение на col-xs-4 не имело значения ) Div значка службы фактически увеличивается после определенной ширины и, кажется, все вместе выходит из класса столбца. Покойся с миром: / да, я проверил все отзывчивые CSS, чтобы убедиться, что ничего не мешает.   -  person Alex Schoeneck    schedule 29.04.2016
comment
Проверьте это. Не беспокойтесь о высоте или других вещах, сначала найдите структуру. imgur.com/1eQy264   -  person devfaysal    schedule 29.04.2016
comment
@MeFaysal больше похож на первый. Этот пример - то, что вы ищете. извините за путаницу imgur.com/dOpzIBI . Белые div могли бы быть даже полной ширины, если бы это облегчило задачу.   -  person Alex Schoeneck    schedule 29.04.2016
comment
Может быть, это то, что вы ищете. imgur.com/X3bED78   -  person devfaysal    schedule 29.04.2016
comment
@MeFaysal да. но мне нужно, чтобы белые ящики были полной высоты. Может быть и полной ширины, но я бы предпочел 70%, как видно из моей разметки.   -  person Alex Schoeneck    schedule 29.04.2016
comment
Ну, высота Div или раздела всегда зависит от высоты содержимого. Но если вы хотите присвоить ему высоту, вы можете использовать минимальную высоту или использовать заполнение содержимого. Я загружаю свои коды в раздел ответов. проверьте, работает ли это для вас.   -  person devfaysal    schedule 29.04.2016

Ответы (1)


arrow_upward
0
arrow_downward

Высота Div или раздела всегда зависит от высоты содержимого. Но если вы хотите присвоить ему высоту, вы можете использовать минимальную высоту или использовать заполнение содержимого. Измените отступ и задайте нужную высоту.

Вот HTML

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/custom.css">
    </head>
    <body>
        <section id="services">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4">
                        <div class="columndirt">
                            <div class="service-icon">
                                <div class="icon-daycare">
                                    <div class="box text-center"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="columndirt">
                            <div class="service-icon">
                                <div class="icon-daycare">
                                    <div class="box text-center"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="columndirt">
                            <div class="service-icon">
                                <div class="icon-daycare">
                                    <div class="box text-center"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- BEGIN LINK --><a href="https:&#x2F;&#x2F;www.namecheap.com&#x2F;?aff=100108"><img src="http:&#x2F;&#x2F;files.namecheap.com&#x2F;graphics&#x2F;linkus&#x2F;200x200-4.gif" width="200" height="200" border="0" alt="Namecheap.com"></a><!-- END LINK -->
        <script src="js/jquery-1.12.3.min.js"></script>       
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

CSS

#services {
    background-color: #291501;
    /*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
    padding: 0px 0;
    padding-bottom: 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    min-height: 590px;
    display: block;
    vertical-align: middle;
    position: relative;
    padding-top: 100px;
    //height: 500px;
}

.columndirt {
    border: 1px solid #fff;
    background: #fff;
}

.service-icon {
    float: none;
/*    margin: 0 auto;
    margin: 158px;
    margin-top: 180px;*/
    border-radius: 100%;
    background-color: #6d4827;
    background-image: url(../images/cdh/newheader/ps/dots.png);
    background-size: 1500px;
    display: inline-block;
    font-size: 36px;
    height: 170px;
    line-height: 170px;
    width: 170px;  
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
    vertical-align: middle;

    margin: 100px 0;

}
.icon-daycare {
    vertical-align: middle;
    color: #9f6c43;
    display: inline-block;
    max-width: 100%;
    min-height: 50%;
    min-width: 100%;
    background-image: url(../images/cdh/newheader/ps/daycareicon.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.box{
    height: 30px;
    width: 30px;
    background: green;
    margin: 25px 0 0 70px;
}
person devfaysal    schedule 29.04.2016