Question

问题如下。我有一个块元素，比如说<div>标签，我想把它放在中心位置。我可以设置margin-left: auto; margin-right:auto，问题就解决了。但是，我怎样才能制作比左边大两倍的右边距？

在以前的日子里，在带有框架的HTML4.01中，我可以将中间框架宽度设置为600px，将左边框宽度设置为“1 *”，将右边框宽度设置为“2 *”以获得我想要的布局。那么我如何对HTML5做同样的事情呢？

Answer 1

这不是一个很好的解决方案，因为它需要Flexbox和一个额外的元素，但正确的“边距”是左边距的两倍：

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* fix for old Firefox */
  width: 100%;
}

.bar {
  border: 1px solid;
  width: 600px;
  /* optional */
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 1 600px;
  -ms-flex: 0 1 600px;
  flex: 0 1 600px;
}

.foo:after {
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  display: block;
  content: ' ';
}

.foo:before {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: block;
  content: ' ';
}    

<div class="foo">
  <div class="bar">
    Bar
  </div>
</div>

http://caniuse.com/flexbox

如果您对3个额外元素没问题，可以使用display: table/table-cell并最大化您的浏览器支持：

http://cssdeck.com/labs/saojg66o

.foo {
  display: table;
  width: 100%;
}

.a, .b, .c {
  display: table-cell;
}

.a {
  width: 10%;
}

.b {
  border: 1px solid;
  width: 600px;
}

.c {
  width: 20%;
}

<div class="foo">
  <div class="a">
  </div>
  <div class="b">
    Foo
  </div>
  <div class="c">
  </div>
</div>

Answer 2

如果div宽度为<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style media="all"> div {width: 40%; height: 600px; background: red; margin-left: 20%; margin-right: 40%;} </style> </head> <body> <div></div> </body> </html>是可以接受的，那就很容易了：

{{1}}

Answer 3

你可以使用类似的东西：

div {
    position: absolute;
    width: 300px; height: 300px;
    top: 50%; left: 50%;
    margin-top: -150px; margin-left: -150px;
    border: 1px solid black 
}

这将集中你所说的<div>。如果您想要左或右更多或更少的保证金，只需更改margin-left: -150px;值。

jsFiddle example

Answer 4

由于div必须具有固定宽度，因此可能需要JS来实现此目的。我是JS的新手，所以这可能是糟糕的代码，但无论如何它似乎都在起作用：http://cdpn.io/LIizc

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
body {margin: 0; padding: 0;}
div {width: 600px; height: 600px; background: red; }
</style>

</head>
<body>

<div id="test"></div>

<script>
function resize(elem){
  var windowWidth  = document.documentElement.clientWidth,
      remainder = windowWidth - elem.clientWidth;
  elem.style.marginLeft = remainder * 1/3 + "px";
}

var div = document.getElementById("test");
window.addEventListener('resize', function(){
  resize(div);
}, false);
resize(div);
</script>
</body>
</html>

CSS：在对块元素进行居中时创建不相等的边距

4 个答案: