Décalage div du centre

Je suis en train de position d'un div x nombre de pixels à droite du centre de la page. La div serait donc par rapport au centre.

Jusqu'à présent, j'ai essayé quelque chose de stupide comme

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

Mais vous n'avez pas besoin de test que dans un navigateur pour savoir que ça ne marcherait pas.

Merci d'avance pour toute aide.

source d'informationauteur Joseph Szymborski

  1. 15

    Je vais essayer, à l'aide de deux DIVs, l'un dans l'autre. Quelque chose comme ceci:

    <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 */
}

    Voir cet exemple live at jsfiddle.

    L'extérieur div serait centrée horizontalement que par cette question/réponse: Comment horizontalement centre d'un <div> autre <div>?

    Puis, à l'intérieur diff est juste déplacé de 20 pixels vers la droite, en utilisant une marge.

    Noter que, si vous laissez width comme autola largeur doit être égale à zéro, et il pourrait ne pas être ce que vous voulez.

  2. 6

    Si vous connaissez la largeur de la div élément que vous souhaitez position par rapport au centre, alors vous pourriez faire quelque chose comme ceci:

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

    Résultat

    Décalage div du centre

  3. 1

    Vous pourriez centre de la div (avec margin:auto) et déplacer le contenu (dans un autre div) de X pixels vers la droite avec:

       margin-right:-20px

    Ou tout simplement faire votre enfermant div 40 pixels en plus et d'aligner votre texte à droite

  4. 1
    <code>
<div class="col-xs-12 (or whatever the div is)" style="position:relative;left:20px;text-align:center">Your text here</div>
</code>

    Cela fonctionne pour tous les Bootstraps, html5 (et même dans MediaWiki l'enfer).Le truc, c'est de la "POSITION:RELATIVE"

    Vous pouvez faire la même chose que CSS.

    <code>
.whateva {
  position:relative;
  left:20px;
  text-align:center;
}
</code>
  5. 0

    Utiliser ce 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>

    Résultat:


    Décalage div du centre