代码之家 › 专栏 › 技术社区 › Sruly

如何使div居中并围绕其内部的div展开?

html css

Sruly · 技术社区 · 17 年前

我有一个我想要居中的页面,在整个内容周围有一个背景和边框。

我发现了一个javascript黑客使它成为中心,但它只在页面加载后才中心,看起来很糟糕。

下面是一个示例html页面,它分享了我的问题

<div style="background-color: Red; width: 980px; position: absolute;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
</div>

下面是使其工作的Javascript(使用Jquery)

$(function() {
        var winH = $(window).height();
        var winW = $(window).width();
        $("#container").css('left', winW / 2 - $("#container").width() / 2);
    });

一定有更好的办法。

谢谢

4 回复 | 直到 17 年前

Guffa 17 年前

使用 auto 左右 margin

在浮动元素之后放置一个元素并使用 clear 把它放在他们下面。因为它不是浮动的,所以会影响外部div的大小。

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
    <div style="clear: both; height: 0; overflow: hidden;"></div>
</div>

simon622 17 年前

这是一个棘手的问题,但我在样式表中使用以下代码:;

<style>div.sentor {text-align: center; height: 100%;} div.child{margin-left: auto; margin-right: auto; width: 95%; height: 100%;}</style>

然后在体内;

<div class="sentor">
<div class="child">
    <div id="mycontent">

这应该能奏效

Emily 17 年前

使用:

<div style="margin:0 auto; overflow:hidden; background-color: Red; width: 980px; id="container">

保证金:0自动;将使红色分区居中。

溢出:隐藏;将使红色div拉伸以包含两个浮动div。

Andrew Noyes 17 年前

<html>
    <head>
        ...
    </head>

    <body>

        <div id="center">
            <!-- your content -->
        </div>

    </body>

</html>

要使div#center的内容移动到页面的中心,我们需要以下CSS:

body {
    text-align: center;
}

div#center {
    text-align: left;
    width: 600px;    // Or some other arbitrary width
    margin: 0 auto;
}

这将使身体内的一切处于中心。但是,文本对齐:居中;属性也将应用于body的子级,所以我们使用第二个样式规则来取消它。或者,可以使用以下样式规则代替div#center:

body * {
    text-align: left;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前