CSS | Bootstrap列中的多层居中的div

我想在每个列中“.service-icon”居中的部分中有3个响应列。我有一个列的背景图像（dirtcolumn.png，但这可以用一个完整的高度div来代替......我想要的是它被集中在div /列中）。你可以看到在我的第一个网站在首节的掩护下出现问题---->MOST RECENT SCREENSHOT - http://aleven.netne.net/CDH/CSS | Bootstrap列中的多层居中的div

HTML：（每次整理后标记我可能觉得其中包括给同事类的所有div MD-4 COL-XS-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. –

你有没有尝试Bootstrap的'文本中心'类在同一个div作为你的'col-md-4'？它会将div中的所有内容居中。 – Tricky12

格或节的高度总是依赖于内容的高度。但是如果你想给它一个高度，你可以使用最小高度，或者你可以使用内容填充。改变填充并给出你想要的高度。

下面是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列中的多层居中的div

回答

相关问题