Question

我有一个有很多div的仪表板。

当用户按照以下方式调整页面大小时，我需要将所有div定位到中心：

enter image description here

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

Answer 2

将您的float:left更改为display:inline-block

中的.chartContainer

Example

Answer 3

试试这个：

<div style="min-height: 1000px;text-align:center; position: relative;">
    <div id="wrapper">
        <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 id="Friends" class="chartContainer"></div>
        <%--<div id="Other" class="chartContainer"></div>--%>

    </div>      
</div>

#wrapper{
    position: absolute;
    left: 25%;*Or however much you want.*
    right: 25%;*Or however much you want.*
    min-height: 1000px;
}

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

将所有div对齐到HTML5中心

3 个答案: