Html 从中心偏移 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6783902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Offset div from center
提问by Joseph Szymborski
I'm trying to position a div x amount of pixels to the right of the center of the page. The div would therefore be relative to the center.
我正在尝试将 div x 像素量定位到页面中心的右侧。因此，div 将相对于中心。
So far, I've tried something stupid like
到目前为止，我已经尝试过一些愚蠢的事情
margin:0 auto;
margin-left:20px;
But you don't need to test that in a browser to know it wouldn't work.
但是您不需要在浏览器中测试它就知道它不起作用。
Thanks in advance for any help.
在此先感谢您的帮助。
回答by Denilson Sá Maia
I'd try using two DIVs, one inside another. Something like this:
我会尝试使用两个 DIV，一个在另一个里面。像这样的东西：
<div class="outer">
<div class="inner">Hello, world!</div>
</div>
.outer {
width: 1px; /* Or zero, or something very small */
margin: auto;
overflow: visible;
background: red; /* A color just for debug */
}
.inner {
margin-left: 20px;
background: yellow; /* A color just for debug */
width: 100px; /* Depending on the desired effect, width might be needed */
}
See this example live at jsfiddle.
The outer divwould be horizontally centered as per this question/answer: How to horizontally center a <div> in another <div>?
根据div此问题/答案，外部将水平居中：如何将 <div> 水平居中在另一个 <div> 中？
Then, the inner diff is just moved 20 pixels to the right, using a margin.
然后，使用边距将内部差异向右移动 20 个像素。
Note that, if you leave widthas auto, the width will be zero, and it might not be what you want.
请注意，如果您保留width为auto，则宽度将为零，并且可能不是您想要的。
回答by Hristo
If you know the width of the divelement you want to position relative to the center, then you could do something like this:
如果您知道div要相对于中心定位的元素的宽度，那么您可以执行以下操作：
http://jsfiddle.net/UnsungHero97/Fg9n6/
http://jsfiddle.net/UnsungHero97/Fg9n6/
HTML
HTML
<div id="box">off center</div>
<div id="box2">center</div>
CSS
CSS
#box {
width: 300px;
height: 100px;
border: 1px solid magenta;
margin: 0 auto;
text-align: center;
line-height: 100px;
position: relative;
left: 20px;
}
#box2 {
width: 300px;
height: 100px;
border: 1px solid skyblue;
margin: 0 auto;
text-align: center;
line-height: 100px;
}
Result
结果
回答by Timothy Wolford II
<code>
<div class="col-xs-12 (or whatever the div is)" style="position:relative;left:20px;text-align:center">Your text here</div>
</code>
This works for all Bootstraps, html5 (and even in MediaWiki hell).The trick is "POSITION:RELATIVE"
这适用于所有 Bootstrap、html5（甚至在 MediaWiki 地狱中）。诀窍是“POSITION:RELATIVE”
You can do the same thing as CSS.
您可以执行与 CSS 相同的操作。
<code>
.whateva {
position:relative;
left:20px;
text-align:center;
}
</code>
回答by marioBonales
You could center the div (with margin:auto) and move the content (in another div) X pixels to the right with:
您可以将 div 居中（使用 margin:auto）并将内容（在另一个 div 中）向右移动 X 个像素：
margin-right:-20px
Or just make your enclosing div 40 pixels longer and align your text to the right
或者只是让你的封闭 div 长 40 像素并将你的文本向右对齐
回答by Touhid Rahman
Use this code:
使用此代码：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
#outer {
position:relative;
width:300px;
height:100px;
background-color:#000000;
}
#inner {
position:absolute;
left:50%;
width:100px;
height:100px;
margin-left:-30px; /*Basic Margin Left-Half of Width=20px-50px=-30px*/
background-color:#ff0000;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
Result:
结果：
