Offset div del centro

Estoy tratando de colocar una div x cantidad de píxeles a la derecha del centro de la página. El div sería, por lo tanto, relativo al centro.Offset div del centro

Hasta ahora, he intentado algo estúpido como

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

Pero usted no necesita probar que en un navegador para saber que no iba a funcionar.

Gracias de antemano por cualquier ayuda.

Fuente

2011-07-21 Joseph Szymborski

que iba a tratar utilizando DIVs dos, uno en el interior otro. Algo como esto:

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

Ver this example live at jsfiddle.

El exterior div estaría centrado horizontalmente según esta pregunta/respuesta: How to horizontally center a <div> in another <div>?

Entonces, el diff interior se acaba de mudar 20 píxeles a la derecha, el uso de un margen.

Tenga en cuenta que si deja width como auto, el ancho será cero y es posible que no sea el que desea.

Fuente

2011-07-21 23:27:57

Gracias un paquete, que funciona muy bien. –

gracias +1. esto me salvó un problema real al normalizar las posiciones emergentes de información emergente en diferentes resoluciones de pantalla. –

Tenga en cuenta que esto solo funciona si necesita mover el contenido hacia la derecha, por lo que no funcionará si desea moverlo hacia la izquierda. Puedes arreglar eso usando un margen izquierdo negativo, pero eso rompe el desplazamiento. – Vallentin

Se podría centrar la div (con margen: auto) y mover el contenido (en otro div) X píxeles hacia la derecha con:

margin-right:-20px

O simplemente hacer su div envolvente 40 píxeles más tiempo y alinear su texto a la derecha

Fuente

2011-07-21 23:12:23 marioBonales

Si conoce el ancho del elemento div quiere posicionar con respecto al centro, entonces usted podría hacer algo como esto:

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

Resultado

Fuente

2011-07-21 23:27:18 Hristo

Esta es la solución correcta. Casi lo tienes claro: simple, elegante y, a diferencia de todos los demás, mantiene la separación de contenido y presentación. Buen trabajo. –

Este debería ser el motor aceptado, de lejos la solución más limpia – Sonic750

gracias, @ Sonic750! – Hristo

Usar este código:

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

Resultado:
enter image description here

Fuente

2013-05-27 18:31:30

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

Esto funciona para todos Bootstraps, HTML5 (e incluso en MediaWiki infierno) .El truco es "POSICIÓN: RELATIVO"

Puedes hacer lo mismo que CSS.

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

Fuente

2016-11-07 02:31:51

Offset div del centro

Respuesta

Cuestiones relacionadas