Html 使用 CSS，如何将 DIV 移动到中心位置的左侧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24237557/
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
Using CSS, how do I move a DIV to the left of the centre position?
提问by Questioner
A fairly standard way to horizontally centre a DIVis to set the left and right margins to auto.
将 a 水平居中的一种相当标准的方法DIV是将左右边距设置为auto。
However, I have a DIVthat I want to be mostly horizontally centred, but I want to nudge it a little toward the left.
但是，我有一个DIV我想要大部分水平居中的，但我想将它向左轻推一点。
I tried setting the margins like so:
我尝试像这样设置边距：
margin: 100px 60% 24px 40%;
... and also like this:
......也像这样：
margin: 100px 40% 24px 60%;
... but bothresulted in the DIV being positioned further to the right.
...但两者都导致 DIV 位于更靠右的位置。
I tried adding padding to the DIV, but that also only moves it to the right.
我尝试向 中添加填充DIV，但这也只会将其向右移动。
In short, it seems no matter what I do, the DIVmoves to the right, not to the left as desired.
简而言之，无论我做什么，似乎都DIV向右移动，而不是向左移动。
How do I nudge a DIVa little to the left of centre?
我如何DIV向中心左侧轻推一点？
采纳答案by Questioner
Turns out I was able to do what I needed to do with floating the DIVs.
事实证明，我能够做我需要做的浮动 DIV 的事情。
.left,
.right {
display: block;
position: relative;
margin-bottom: 2em;
clear: both;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
回答by CRABOLO
A different way of handling this is making a parent wrapper div. Where you set that to auto so that parent is centered, but the child div is then starts at the center but moves to the right. See fiddle http://jsfiddle.net/4H26W/1/
处理此问题的另一种方法是制作父包装器 div。您将其设置为 auto 以便父级居中，但子级 div 从中心开始但向右移动。见小提琴http://jsfiddle.net/4H26W/1/
html
html
<div id="red">
<div id="blue">Some text</div>
</div>
css
css
#red {
width: 1px; /* you could actually just change it to 0px */
margin: 100px auto;
background: red;
}
#blue {
width: 200px;
background: blue;
}
Then if you wanted to further optimize the position of the child div, you could just add some left styles to it
那么如果你想进一步优化子div的位置，你可以在里面添加一些left样式
position: relative; /* has to be position relative for left to work, or you could just do margin-left: -50px; too */
left: -50px;
回答by Mohebifar
Since you tagged css3for your question so you can use it :
由于您标记css3了您的问题，因此您可以使用它：
margin: auto;
-webkit-transform: translateX(10px); /* 10px to left */
-moz-transform: translateX(10px); /* 10px to left */
-ms-transform: translateX(10px); /* 10px to left */
transform: translateX(10px); /* 10px to left */
回答by G-Cyrillus
there is an option with text-align, display and negative margin .
有一个带有文本对齐、显示和负边距的选项。
HTML test base :
HTML 测试基地：
<div class="left">center on my left</div>
<hr/>
<div class="right">center on my right</div>
<hr/>
<div >center me</div>
CSS base:
CSS基础：
body {
text-align:center;
background:linear-gradient(to right,gray 50%,white 50%)
}
div {
width:20%;/* whatever */
display:inline-block;
border:solid;
}
.left {
margin-left:-20%;/* whatever */
}
.right {
margin-right:-20%;/* whatever */
}
回答by Anthony
If you set the margin-rightor margin-leftas a separate rule after setting the marginrule, you'll still get frustrated, but not as much:
如果在设置规则后将margin-right或设置margin-left为单独的margin规则，您仍然会感到沮丧，但不会那么沮丧：
<div id="first"></div>
<div id="second"></div>
div {
height: 100px;
width: 100px;
border: 1px solid red;
margin: 2em auto;
}
#second {
margin-right: 42%;
}
See example fiddle: http://jsfiddle.net/Q7EHX/
请参阅示例小提琴：http: //jsfiddle.net/Q7EHX/
回答by Kae Verens
position relative.
位置相对。
<div style="margin:100px auto 24px;
position:relative;left:-30px;
border:1px solid red;width:200px
">should be a little off-center</div>
