Question

我想将<div />置于<body />的中心位置，并为其添加margin-left和margin-right。这样的东西 - 当然应该有效:) https://jsfiddle.net/kweyn912/

通常，我会使用margin: auto，但在这种情况下，我想要专门添加其他margin，所以我不能这样做。

我尝试将transform: translateX(-50%)与left: 50%和margin-left一起使用。这一直有效，直到我尝试设置margin-right

附注：
我有一些限制：我无法使用padding代替margin。我无法使用position: absolute，我必须使用display: block

Answer 1

更新了添加

的项目

div {
  width: 200px;
  height: 100px;
  background: lightblue;
  margin-left: 20px;
  margin-right: 40px;
  position: absolute;
  left: calc(50% - 110px)
}

body {
  width: 100%;
  background: white;
  text-align: center
}

https://jsfiddle.net/kweyn912/6/

Answer 2

尝试向主体（或父容器）添加填充，而不是在父元素中居中div的div。这应该使div与左/右排水沟居中。

div {
  max-width: 400px;
  height: 100px;
  background: lightblue;
  margin: 0 auto;
  display: block;
}

body {
  background: white;
  padding: 0 20px
}

https://jsfiddle.net/y16k52xt/

Answer 3

您可以在父元素上使用margin: 0 auto和display: block代替使用display: inline-block和text-align: center，而不是使用white-space: pre和body { width: 100%; background: white; text-align: center; white-space: pre; } .div { margin-left: 20px; margin-right: 40px; width: 200px; height: 100px; background: lightblue; display: inline-block; } .two { width: 250px; margin-left: 30px; margin-right: 80px; background: red; }。然后使用您的保证金调整将其设置为偏离中心。使用<body> <p> CENTER </p> <div class="div one"> Lorem ipsum </div> <div class="div two"> </div> <div class="div three"> </div> </div> </body>强制每个项目中断到新行。

env->FindClass(NULL);

libart.so

https://jsfiddle.net/kweyn912/12/

Answer 4

让我们说你希望你的元素在左边20px偏离中心（你的左边缘的例子的净结果：20px和margin-right：40px;

这与变换是等价的：translateX（-20px）;

div {
  width: 200px;
  height: 100px;
  background: lightblue;
  margin: auto;
  transform: translateX(calc(20px - 40px));
}

  <div>
    Lorem ipsum
  </div>

水平对齐div与额外的margin-left和margin-right

4 个答案: