从中心偏移div [英] Offset div from center

问题描述

我尝试在页面中心的右侧放置一个div x的像素。

到目前为止，我已经尝试过像

这样的东西。

  margin：0 auto; 
 margin-left：20px; 
  

但是你不需要在浏览器中测试它，知道它不工作。 / p>

感谢您提供任何帮助。

解决方案

使用两个DIV，一个在另一个。像这样：

 < div class =outer> 
< div class =inner> Hello，world！< / div> 
< / div> 
 
 .outer {
 width：1px; / *或零，或非常小的东西* / 
 margin：auto; 
 overflow：visible; 
 background：red; / *只是用于调试的颜色* / 
} 
 .inner {
 margin-left：20px; 
 background：yellow; / *只是调试的颜色* / 
 width：100px; / *根据所需效果，可能需要宽度* / 
} 
  

a href =http://jsfiddle.net/VxRcs/>这个例子住在jsfiddle 。

外部 div 将按照此问题/答案水平居中：如何中心DIV在DIV？

然后，内差分只是向右移动20像素，使用边距。

请注意，如果将 width 保留为 auto ，宽度将为零，它可能不是你想要的。

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.

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.

解决方案

I'd try using two DIVs, one inside another. Something like this:

<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 div would be horizontally centered as per this question/answer: How to center DIV in DIV?

Then, the inner diff is just moved 20 pixels to the right, using a margin.

Note that, if you leave width as auto, the width will be zero, and it might not be what you want.

这篇关于从中心偏移div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！