我试图水平中心一个<div>块元素在页面上,并将其设置为最小宽度。最简单的方法是什么?我想要<div>元素内联与我的页面的其余部分。我来举个例子:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

当前回答

这里我添加了正确的答案

您可以使用此片段代码并进行自定义。这里我使用2个子块。这应该显示页面的中心。 您可以使用一个或多个块。

<html>
<head>
<style>
#parent {
    width: 100%;
    border: solid 1px #aaa;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
}

.child {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>

<body>

<div class="mydiv" id="parent">


<div class="child">
Block 1
</div>
<div class="child">
Block 2
</div>

</div>
</body>
</html>

其他回答

在大多数浏览器,这将工作:

div.centre { 宽度:200 px; 显示:块; background - color: # eee; margin-left:汽车; margin-right:汽车; } <div class=" center ">一些文本</div>

在IE6中,你需要添加另一个外部div:

div.layout { text-align:中心; } div.centre { text-align:左; 宽度:200 px; background - color: # eee; 显示:块; margin-left:汽车; margin-right:汽车; } < div class = "布局”> <div class=" center ">一些文本</div> < / div >

如果你知道你的div的宽度并且它是固定的,你可以使用下面的css:

margin-left: calc(50% - 'half-of-your-div-width');

'half-of-your-div-width'显然应该是div宽度的一半。

使用jQuery:

$(document).ready(function() {
    $(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6
    $(".myElement_container_new").css({// for IE6
        "display" : "block",
        "position" : "relative",
        "margin" : "0",
        "padding" : "0",
        "border" : "none",
        "background-color" : "transparent",
        "clear" : "both",
        "text-align" : "center"
    });
    $(".myElement").css({
        "display" : "block",
        "position" : "relative",
        "max-width" : "75%", // for example
        "margin-left" : "auto",
        "margin-right" : "auto",
        "clear" : "both",
        "text-align" : "left"
    });
});

或者,如果你想用".myElement"类居中每个元素:

$(document).ready(function() {
    $(".myElement").each(function() {
        $(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6
        $(".myElement_container_new").css({// for IE6
            "display" : "block",
            "position" : "relative",
            "margin" : "0",
            "padding" : "0",
            "border" : "none",
            "background-color" : "transparent",
            "clear" : "both",
            "text-align" : "center"
        });
        $(this).css({
            "display" : "block",
            "position" : "relative",
            "max-width" : "75%",
            "margin-left" : "auto",
            "margin-right" : "auto",
            "clear" : "both",
            "text-align" : "left"
        });
    });
});

.center { 高度:20 px; 背景颜色:蓝色; } .center > div { 保证金:汽车; 背景颜色:绿色; 宽度:200 px; } < div class = "中心" > < / div > < div >你文本 < / div >

小提琴

你可以在CSS上使用margin: 0 auto而不是margin-left: auto;margin-right:汽车;