从中心偏移 div

发布于 2024-11-25 12:52:22 字数 188 浏览 1 评论 0原文

我试图将 div x 像素数量放置在页面中心的右侧。因此 div 将相对于中心。

到目前为止,我已经尝试过一些愚蠢的事情,比如

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

但你不需要在浏览器中测试它就知道它不起作用。

预先感谢您的任何帮助。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

画▽骨i 2024-12-02 12:52:22

我会尝试使用两个 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 */
}

请参阅jsfiddle 上的此示例

外部 div 将根据此问题/答案水平居中:如何水平居中

,然后,使用边距将内部差异向右移动 20 像素。

请注意,如果将 width 保留为 auto,则宽度将为零,并且可能不是您想要的。

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 horizontally center a <div> in another <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.

我喜欢麦丽素 2024-12-02 12:52:22

如果您知道要相对于中心定位的 div 元素的宽度,那么您可以执行以下操作:

http://jsfiddle.net/UnsungHero97/Fg9n6/

HTML

<div id="box">off center</div>
<div id="box2">center</div>

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;
}

结果

结果

If you know the width of the div element you want to position relative to the center, then you could do something like this:

http://jsfiddle.net/UnsungHero97/Fg9n6/

HTML

<div id="box">off center</div>
<div id="box2">center</div>

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

result

玩心态 2024-12-02 12:52:22
<code>
<div class="col-xs-12 (or whatever the div is)" style="position:relative;left:20px;text-align:center">Your text here</div>
</code>

这适用于所有 Bootstrap、html5(甚至在 MediaWiki 地狱中)。技巧是“位置:相对”

你可以做与 CSS 相同的事情。

<code>
.whateva {
  position:relative;
  left:20px;
  text-align:center;
}
</code>
<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"

You can do the same thing as CSS.

<code>
.whateva {
  position:relative;
  left:20px;
  text-align:center;
}
</code>
许你一世情深 2024-12-02 12:52:22

您可以将 div 居中(使用 margin:auto)并将内容(在另一个 div 中)向右移动 X 像素:

   margin-right:-20px

或者只是使封闭的 div 长 40 像素并将文本向右对齐

You could center the div (with margin:auto) and move the content (in another div) X pixels to the right with:

   margin-right:-20px

Or just make your enclosing div 40 pixels longer and align your text to the right

小嗷兮 2024-12-02 12:52:22

使用此代码:

<!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>

结果:

在此处输入图像描述

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:

enter image description here

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文