CSS | многоцентровые разделители в столбцах Bootstrap

Мне хотелось бы 3 ответных столбца в разделе, где «.service-icon» центрируется в каждом столбце. У меня есть изображение для фона столбца (dirtcolumn.png, но это может быть заменено на полную высоту div ... все, что я хочу, это его центрирование внутри div/column). Вы можете видеть, где проблема возникает на моем первом веб-сайте в первом разделе под обложкой ---->MOST RECENT SCREENSHOT - http://aleven.netne.net/CDH/CSS | многоцентровые разделители в столбцах Bootstrap

HTML: (после размещения каждой разметки я мог подумать о том, что включает в себя предоставление всех классов divs col- мкр-4 Col-хз-4 Т.Д. и Т.П.)

<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; 

} 
}

источник

2016-04-28 Alex Schoeneck

я не нашел каких-либо проблем в ссылке, которую вы предоставляете. Можете ли вы объяснить свою проблему с помощью экрана? – IamFaysal

@MeFaysal Я обновил изображение с экрана. Я хотел бы, чтобы столбцы грязи были расположены позади значков обслуживания. по какой-то причине только один появится или ничего вообще .... я бы хотел всех 3. –

Вы пробовали класс «text-center» класса Bootstrap в том же div, что и ваш 'col-md-4'? Он будет центрировать все содержимое внутри div. – Tricky12

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; 
}

источник

2016-04-29 16:58:54 IamFaysal

CSS | многоцентровые разделители в столбцах Bootstrap

ответ

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