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

Question

我想在<body />中心放置一个<div /> ，并向其添加额外的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在父元素上居中以将div居中。 然后使用边距调整将其设置为偏离中心。 使用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>

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

Answer 4

假设您希望元素偏离左侧20px（例如，margin-left：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 个解决方案

解决方案1
0 2016-02-23 18:50:13

解决方案2
0 2016-02-23 18:51:36

解决方案3
0 2016-02-23 19:12:52

解决方案4
0 2016-02-23 19:18:13

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

问题描述

4 个解决方案

解决方案1 0 2016-02-23 18:50:13

解决方案2 0 2016-02-23 18:51:36

解决方案3 0 2016-02-23 19:12:52

解决方案4 0 2016-02-23 19:18:13

解决方案1
0 2016-02-23 18:50:13

解决方案2
0 2016-02-23 18:51:36

解决方案3
0 2016-02-23 19:12:52

解决方案4
0 2016-02-23 19:18:13