css - 在 HTML5 中将所有 div 对齐到中心

Question

我有一个包含许多 div 的仪表板。

当用户如下调整页面大小时，我需要将所有 div 定位到中心:

div 的 HTML 如下:

 <div style="min-height: 1000px;text-align:center; position: relative;">
                    <div style="position: relative; min-height: 1000px;">

                        <div id="Steps" class="chartContainer"></div>
                        <div id="Distance" class="chartContainer"></div>
                        <div id="Floors" class="chartContainer"></div>
                        <div id="ActivityMinutes" class="chartContainer"></div>

                        <div id="Calories" class="chartContainer"></div>
                        <div id="Weights" class="chartContainer"></div>
                        <div id="BMI" class="chartContainer"></div>
                        <div id="Sleep" class="chartContainer"></div>

                        <div id="Food" class="chartContainer"></div>
                        <div id="Water" class="chartContainer"></div>
                        <div id="BloodPressure" class="chartContainer"></div>
                        <div id="Glucose" class="chartContainer"></div>

                        <div id="HeartRate" class="chartContainer"></div>
                        <div id="Devices" class="chartContainer"></div>

                    </div>      
                </div>


    .chartContainer {
    width: 280px;    
    height: 240px;
    float: left;
    position: relative;
    margin: 2.5px;
    background-color: #f5f5f5 !important;
    border-radius: 5px;
    border: 1.5px solid #e3e3e3;
}

http://jsfiddle.net/T9Fb7/

Answer 1

删除 float:left 并添加 display:inline-block

如果您正在使用媒体查询，您可以在较小的屏幕尺寸下将 float 设置为 none。

JSFiddle Demo