如何将<div>对齐到页面的中间(水平/宽度)

我有一个div标签，宽度设置为800像素。当浏览器宽度大于800像素时，它不应该拉伸div，但应该将它带到页面的中间。

当前回答

<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>

如果你想改变垂直位置，改变250的值，你可以根据你的需要安排内容。不需要给出宽度和其他参数。

2014-10-29 11:50:55

其他回答

如果你有一些常规的内容，而不是只有一行文本，我所知道的唯一可能的原因是计算空白。

这里有一个例子:

HTML

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.common {
  border: 1px solid black;
}

#supercontainer {
  width: 1200px;
  background: aqua;
  float: left;
}

#middlecontainer {
  float: left;
  width: 104px;
  margin: 0 549px;
}

#container {
  float: left;
}

#first {
  background: red;
  height: 102px;
  width: 50px;
  float: left;
}

#second {
  background: green;
  height: 50px;
  width: 50px;
}

#third {
  background: yellow;
  height: 50px;
  width: 50px;
}

因此，#supercontainer是你的“整个页面”，它的宽度是1200px。

# middlecontaintainer是你的网站内容的div;宽度为102px。在已知内容宽度的情况下，您需要将页面大小除为2，并从结果中减去内容宽度的一半: 1200 / 2 - (102 / 2) = 549;

是的，我也看到这是CSS的严重失败。

2010-11-26 20:48:20

为了让它在ie6中也能正常工作，你必须这样做:

HTML

<body>
    <div class="centered">
        centered content
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}

2009-06-05 07:54:07

使用下面的代码将div框居中:

.box-content { 保证金:汽车; 上图:0; 右:0; 底部:0; 左:0; 位置:绝对的; 宽度:800 px; 身高:100 px; 背景颜色:绿色; ｝ < div class = " box-content”> < / div >

2016-12-15 07:43:23

获取屏幕的宽度。然后使保证金左25% 使利润率达到25%

通过这种方式，容器的内容将位于中间。

示例:假设容器宽度= 800px;

<div class='container' width='device-width' id='updatedContent'>
    <p id='myContent'></p>
    <contents></contents>
    <contents></contents>
</div>

if ($("#myContent").parent === $("updatedContent"))
{
    $("#myContent").css({
        'left': '-(device-width/0.25)px';
        'right': '-(device-width/0.225)px';
    });
}

2018-05-25 19:55:26

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

2009-06-05 01:49:10

如何将<div>对齐到页面的中间(水平/宽度)

推荐文章

最新文章

标签