CSS |在 Bootstrap 列中分层多个居中的 div答案

【问题标题】：CSS | layer multiple centered divs in Bootstrap columnsCSS |在 Bootstrap 列中分层多个居中的 div
【发布时间】：2016-04-30 00:58:54
【问题描述】：

我希望在“.service-icon”位于每列中心的部分中有 3 个响应列。我有一个列背景的图像（dirtcolumn.png，但这可以用一个全高的 div 代替……我想要的只是它在 div/column 内居中）。你可以在我的第一个网站在封面下的第一部分看到问题出现在哪里----> MOST RECENT SCREENSHOT - 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;

}
}

【问题讨论】：

我在您提供的链接中没有发现任何问题。你能解释一下你的屏幕截图问题吗？
@MeFaysal 我已经更新了屏幕截图。我希望污垢列在服务图标后面居中。出于某种原因，只有一个会出现或什么都不会出现....我想要所有 3 个。
您是否在与您的col-md-4 相同的 div 上尝试过 Bootstrap 的 text-center 类？它将所有内容集中在 div 内。
你想要这样的东西吗？ imgur.com/CXuMZBi
@MeFaysal 关闭。我想在圆圈内再添加一个 div/图像。类似于我示例中的温室图标。我希望白框是父/节的全高。

标签： css html twitter-bootstrap responsive

【解决方案1】：

Div 或部分的高度始终取决于内容高度。但是如果你想给它一个高度，你可以使用 min-height 或者你可以使用内容填充。更改填充并提供所需的高度。

这里是 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;
}

【讨论】：