Question

我希望在每个列中以“.service-icon”为中心的部分中有3个响应列。我有一个用于列背景的图像（dirtcolumn.png但是这可以用一个完整的高度div替换...我想要的是它在div /列中居中）。您可以在封面下的第一部分中查看我的第一个网站上出现问题的位置----＆gt; 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;

}
}

Answer 1

Div或section的高度始终取决于内容高度。但是如果你想给它一个高度，你可以使用最小高度，或者你可以使用内容填充。更改填充并给出你想要的高度。

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

CSS |在Bootstrap列中对多个居中的div进行分层

1 个答案: