Question

我有以下带有一些CMS内容块的ASP.net页面：

<div class="section group" style="background: #CCCCCC; overflow: auto;">
    <div class="col span_1_of_3">
    <CMS:ContentBlock ID="ContentBlock5" runat="server" CssClass="test2" DefaultContentID="638" ClientIDMode="Static" />
    </div>
    <div class="col span_1_of_3">
    <CMS:ContentBlock ID="ContentBlock6" runat="server" CssClass="test2" DefaultContentID="638" ClientIDMode="Static" />
    </div>
    <div class="col span_1_of_3">
    <CMS:ContentBlock ID="ContentBlock7" runat="server" CssClass="test2" DefaultContentID="638" ClientIDMode="Static" />
    </div>
</div>

生成以下HTML源代码：

<div class="section group" style="background: #CCCCCC; overflow: auto;">
    <div class="col span_1_of_3">
    <div id="ContentBlock5" class="test2">
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insurance.aspx?id=473">Most Insurance Plans Accepted</a><br />914-848-5600</span></p>
</div>
    </div>
    <div class="col span_1_of_3">
    <div id="ContentBlock6" class="test2">
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insurance.aspx?id=473">Most Insurance Plans Accepted</a><br />914-848-5650</span></p>
</div>
    </div>
    <div class="col span_1_of_3">
    <div id="ContentBlock7" class="test2">
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insurance.aspx?id=473">Most Insurance Plans Accepted</a><br />914-848-5650</span></p>
</div>
    </div>
</div>

显示它的CSS：

        .test2
        {
            padding: 8px;
            text-align: left;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
        }
            .test2 p
            {
                text-align: left;
            }
.test1 p {
    text-align: left;
    padding: 0 10px 0 10px;
}
.setP p
{
    text-align: left;
    padding: 10px 10px 0 10px;
}
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    overflow: auto;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 100%;
    }
}

输出到最终用户是：

enter image description here

如图所示，三个DIVS未居中。

如何修改CSS，使其无论屏幕大小如何都始终居中。

更新

enter image description here

Answer 1

将display: inline-block;设置为内容块，您获得内容宽度的100％。

然后将text-align: center;添加到父级，将内容添加到所有维度：

.test2 {
    text-align: center;
}
.test2 p {
    display: inline-block;
}

小提琴：http://jsfiddle.net/ob1dr37h/

Answer 2

在float:left;上将display: inline-block更改为.col，然后将text-align: center添加到.section。

Answer 3

将text-align: center添加到div的父级...在这种情况下，section一个：

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    overflow: auto;
    text-align: center;
}

此外，从col div中删除浮动，并将它们内联：

.col {
    display: inline-block;
    margin: 1% 0 1% 1%;
}

Example JsFiddle

Answer 4

从第一期开始，我看到你在做：

html元素上的css和属性的组合什么导致混乱。
您的对齐中心和跨度左对齐。出于什么原因？

尝试使用padding css属性。让p标签填充div标签和css display-inline with text align cener。

如果html标准不是要求，你可以随时将p标签包裹在中心标签上。

如何将三个DIVS与其他HTML标记集中在一个父DIV中

4 个答案: