Question

html代码是

<div id="container_m">
        <div id="div1" class="portlet-content">
            <div class="chartHeaderClass" style="width: 100%;">
                <h3 style="margin-left: 40%">Abandons</h3>
            </div>
            <div id="vertical-chart" class="chart-holder" style="border: 1px solid #D5D5D5; margin-top: 2px">
                <canvas class="overlay" width="478" height="265"></canvas>
            </div>
        </div>
        <div id="div2" class="portlet-content">
            <div class="chartHeaderClass" style="width: 100%;">
                <h3 style="margin-left: 35%">Average Waiting Time</h3>
            </div>
            <div id="vertical-chart2" class="chart-holder" style="border: 1px solid #D5D5D5; margin-top: 2px">
                <canvas class="overlay" width="478" height="265"></canvas>
            </div>
        </div>
        <div id="div3" class="portlet-content">
            <div class="chartHeaderClass" style="width: 100%;">
                <h3 style="margin-left: 35%"># In Queue</h3>
            </div>
            <div id="vertical-chart3" class="chart-holder" style="border: 1px solid #D5D5D5; margin-top: 2px">
                <canvas class="overlay" width="478" height="265"></canvas>
            </div>
        </div>
        <div id="div4" class="portlet-content">
            <div class="chartHeaderClass" style="width: 100%;">
                <h3 style="margin-left: 35%">Service Level</h3>
            </div>
            <div id="line-chart" class="chart-holder" style="border: 1px solid #D5D5D5; margin-top: 2px">
                <canvas class="overlay" width="478" height="265"></canvas>
            </div>
        </div>
    </div>

围绕一切的div id是container_m

我的问题是我不能把那个div放在中心位置。虽然我尝试了很多像边缘：自动和边缘：0和posision固定左边50 但每次，即使div居中，其中的其他元素也会改变它的宽度。

请帮忙。

Answer 1

正如我在评论中所说，由于没有定义的宽度，使用margin: 0 auto将无效。这使得div占据100%宽度。

现在我要设置容器的宽度，然后将div的内部设置为width: 100%;。

我删除了正在使用的id，因为没有理由将其替换为.divs。

<强> CSS：

.divs {
    width:100%;
    height:45%;
}

#container_m {
    width: 46%;
    margin: 0 auto;
}

DEMO HERE

注意： width: 100%;没有多大意义，因为div默认为block元素，因此width: 100%;为div无论如何。它只是向您展示最新情况。

您也可以在内部.divs { width:46%; height:45%; margin: 0 auto; }设置它们，因为它们有宽度但是没有真正需要容器。

<强> CSS：

{{1}}

DEMO HERE

注意：我已经删除了容器，因为不再需要它了。

Answer 2

.portlet-content{
margin: 0 auto;
}

并删除边距：2％;在所有id divs

Answer 3

提供所有4个div都有class。放margin: 0 auto;为了上课。

<强>例如

.divclass
{
  margin: 0 auto;
}

或

为所有4个div margin: 0 auto提供id。

如何在这个页面中居中心

3 个答案: