包装div中的css居中元素

Question

当屏幕分辨率为768时，我需要居中num 4,5块。 请参阅我的截图和我的源代码。

当前视图

它应该是什么

这是我的代码

            <div class="home-property-list">
                <div class="prop-sub">
                    <div class="home-property-list-item">1</div>
                    <div class="home-property-list-item">2</div>
                    <div class="home-property-list-item">3</div>
                </div>
                <div class="prop-sub">
                    <div class="home-property-list-item">4</div>
                    <div class="home-property-list-item">5</div>
                </div>
            </div>

CSS样式

.home-property-list{
    width: 100%;
    height: auto;
    float: left;
}
.home-property-list-item{
    width: 19.6%;
    height: auto;
    float: left;
    margin: 0 0.2%;
    background: #F00;
}

@media only screen and (max-width: 768px) { 
.prop-sub{
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 10px;
}
.home-property-list-item{
    width: 32.9%;
}
}

Answer 1

Demo Fiddle

您需要将text-align:center添加到包装器div，然后确保子元素具有display:inline-block;

将CSS更改为（例如）：

.home-property-list {
    width: 100%;
}
.prop-sub{    
    text-align:center;
}
.home-property-list-item {
    width: 19.6%;    
    display:inline-block;
    margin: 1%;
    background: #F00;
}
@media only screen and (max-width: 768px) {
    .prop-sub {
        width: 100%;
        height: auto;
        float: left;
        margin-bottom: 10px;
    }
    .home-property-list-item {
        width: 32.9%;
    }