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

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

当前回答

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

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

2014-10-29 11:50:55

其他回答

父母{ 位置:相对; ｝孩子{ 位置:绝对的; 左:50%; 变换:translateX (-50%); ｝ <父> <孩子> 儿童> < / 父> < /

2018-08-17 21:12:28

简单的http://jsfiddle.net/8pd4qx5r/

html {
  display: table;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
}

.content {
  margin: 0 auto;
  width: 260px;
  text-align: center;
  background: pink;
}

2015-01-16 17:35:15

旧代码中其他一些预先存在的设置将阻止div页面居中L&R:

隐藏在外部样式表链接中的其他类。其他类嵌入到像img这样的东西中(比如旧的外部CSS打印格式控件)。带有id和/或CLASSES的图例代码将与命名div类冲突。

2012-05-16 17:20:32

获取屏幕的宽度。然后使保证金左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

没有指定div宽度的定心:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

这有点像<center>标签，除了:

所有直接内联的子元素(例如。<h1>)的<center>也将定位到居中根据浏览器默认值，内联块元素可以有不同的大小(与display:block设置相比)

2014-01-31 12:25:05

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

推荐文章

最新文章

标签