[英]Horizontally align div with additional margin-left and margin-right
I would like to center a <div />
in the <body />
and add additional margin-left
and margin-right
to it. 我想在
<body />
中心放置一个<div />
,并向其添加额外的margin-left
和margin-right
。
Something like that - of course it should work :) https://jsfiddle.net/kweyn912/ 这样的东西-当然应该可以工作:) https://jsfiddle.net/kweyn912/
Normally, I would use margin: auto
, but in this case I want to specifically add additional margin
, so I cannot do that. 通常,我将使用
margin: auto
,但是在这种情况下,我想专门添加额外的margin
,所以我不能这样做。
I tried using transform: translateX(-50%)
together with left: 50%
and margin-left
. 我尝试使用
transform: translateX(-50%)
以及left: 50%
和margin-left
。 That worked until I tried setting margin-right
在我尝试设置
margin-right
之前一直奏效
Side notes: 旁注:
I have some restrictions: I cannot use padding
instead of margin
. 我有一些限制:我不能使用
padding
代替margin
。 I cannot use position: absolute
and I have to use display: block
我不能使用
position: absolute
而必须使用display: block
Updated your project adding 更新了您的项目,添加了
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/ https://jsfiddle.net/kweyn912/6/
Try adding padding to the body (or parent container) rather than the div with the div centered in the parent element. 尝试将填充添加到主体(或父容器),而不是将div置于父元素中心的div中。 That should center the div with a gutter on the left/right.
这应该使div居中,并在左侧/右侧放置一个装订线。
div {
max-width: 400px;
height: 100px;
background: lightblue;
margin: 0 auto;
display: block;
}
body {
background: white;
padding: 0 20px
}
https://jsfiddle.net/y16k52xt/ https://jsfiddle.net/y16k52xt/
Instead of using margin: 0 auto
and display: block
, you can use display: inline-block
along with text-align: center
on the parent element to center the divs. 除了使用
margin: 0 auto
和display: block
,还可以使用display: inline-block
以及text-align: center
在父元素上居中以将div居中。 Then use your margin adjustments to set it off-center. 然后使用边距调整将其设置为偏离中心。 Use
white-space: pre
to force each item to break to a new line. 使用
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/ https://jsfiddle.net/kweyn912/12/
Lets say that you want your element to be off center in 20px to the left (Net result of your example of margin-left: 20px and margin-right: 40px; 假设您希望元素偏离左侧20px(例如,margin-left:20px和margin-right:40px;
This is equuivalent to a transform: translateX(-20px); 这等效于转换:translateX(-20px);
div { width: 200px; height: 100px; background: lightblue; margin: auto; transform: translateX(calc(20px - 40px)); }
<div> Lorem ipsum </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.