Centro uno de los dos divs hermanos

A continuación, me gustaría modificar el CSS de modo que el right-sibling es realmente centrado en el container div. (Editar: sin usar el posicionamiento absoluto).Centro uno de los dos divs hermanos

<html> 
    <head> 
    <style type='text/css'> 
     #container { 
     width: 500px; 
     } 
     #left-sibling { 
     float: left; 
     } 
     #right-sibling { 
     text-align: center; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='container'> 
     <div id='left-sibling'>Spam</div> 
     <div id='right-sibling'>Eggs</div> 
    </div> 
    </body> 
</html>

En su implementación actual, el centrado del hermano derecha se ve afectado por el hermano izquierda - se puede ver esto añadiendo display: none al estilo de la left-sibling 's.

(Nota: me gustaría evitar modificar la estructura HTML porque, según tengo entendido, el objetivo de CSS es separar la estructura de etiquetas de la lógica de presentación, y esto no parece una locura solicitud de CSS para manejar.)

TIA.

Fuente

2008-12-05 cdleary

¿Hay alguna razón para no usar el posicionamiento absoluto ya que eso hará que haga exactamente lo que usted quiere? –

Este es un ejemplo de prueba: en la página * real * en la que estoy trabajando, está anidado muy lejos en la página y tiene que estar relativamente posicionado dentro del contenido generado automáticamente. El posicionamiento absoluto solo funciona para elementos como encabezados que no se ven afectados por un flujo desconocido. – cdleary

Puede usar el posicionamiento relativo dentro de #container. También ese tipo de información es importante si quieres una respuesta decente. –

Un truco que acabo de utilizar para conseguir que esto funcione es que tiene relleno a la izquierda del contenedor y podemos alentar al hermano izquierdo a que se siente dentro de este espacio dándole un margen igual pero negativo.

Para completar la imagen, también colocamos relleno a la derecha del contenedor de igual tamaño que el ancho del hermano izquierdo.

<html> 
    <head> 
     <style type='text/css'>  
     #container { 
      width: 500px; 
      padding-left:50px; 
      padding-right:50px;  
      }  
     #left-sibling { 
      border: solid 1px #000; 
      float: left; 
      width:50px; 
      margin-left:-50px; 
     }  
     #right-sibling { 
      border: solid 1px #000; 
      text-align: center; 

     } 
     #container2 { 
      width: 500px; 
      } 
</style> 
    </head> 
    <body> 
     <div id='container'>  
      <div id='left-sibling'>Spam</div> 
      <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div> 
     </div> 
     <div id='container'> 
      <div id='left-sibling' style="display:none;">Spam</div>  
      <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div> 
     </div> 
     <div id='container2'> 
      <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div> 
     </div> 
     </body> 
</html>

Fuente

2008-12-05 11:38:27 rohancragg

¡Impresionante! Esto es exactamente lo que necesitaba. :) En una nota lateral, solo debería tener un 'id' aplicado a un elemento en cada documento HTML. Para más de 1, use un identificador de 'clase'. Gracias de nuevo por la gran solución. –

Cosas buenas @rohancragg. Esto también me funcionó. Eliminé los ID por completo y usé 'clase' en su lugar. ¡Gracias! – Airn5475

Puede cambiar float: left; en #left-sibling en . Esto lo sacará del flujo normal, por lo que ya no afectará a los hermanos de la derecha.

Por supuesto, esto podría tener otros efectos secundarios con su diseño.

Fuente

2008-12-05 09:20:14 Greg

Buen punto: voy a editar la pregunta para especificar que me gustaría evitar el posicionamiento absoluto. – cdleary

Siempre se debe establecer un ancho de elementos flotantes, de lo contrario las cosas se ponen raras :)

Si coloca una regla

border: solid 1px #000;

en ambos divs verá lo que está pasando - el # derecho de hermanos div está llenando todo el ancho del div principal (#container), así que aunque el texto es realmente alineado con el centro, ¡parece que no lo es!

Fuente

2008-12-05 09:27:07

No, esto no es correcto. Aunque # right-sibling llena todo el ancho, el # left-sibling afecta el cálculo de alineación de texto. Como digo en la pregunta, si agrega 'display: none' al estilo para # left-sibling cambia la posición de" Eggs ". – cdleary

Es correcto, aunque el DIV es de ancho completo, no es así como funciona text-align, solo puede alinear el texto dentro del espacio disponible. Agregar huevos
Huevos
Huevos
después del texto en #derecho-derecho y verá que las líneas * a continuación * la div entre hermanos izquierdos están alineadas como desee. –

Sí, quise decir que "el texto ** está ** realmente alineado con el centro" no era una afirmación correcta, porque el hermano izquierdo estaba afectando el cálculo de centrado. – cdleary

El atributo text-align controla la alineación de los contenidos en el contenedor donde se aplica el atributo. Mediante la adición de los siguientes estilos es fácil de ver:

#left-sibling { float: left; width:100px; border:1px Solid Blue; } 
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }

que sugeriría la adición de un tipo de documento a documento para evitar quirksmode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

y los siguientes estilos:

#container { width: 500px; position:relative; border:1px Solid Black; } 
#left-sibling { float:left; position:absolute; top:0px; left:0px; width:100px; border:1px Solid Blue; } 
#right-sibling { width:100px; position:relative; margin-left:auto; margin-right:auto; border:1px Solid Red; }

Usted por supuesto, querría ajustar el tamaño de los hermanos para que se ajuste a sus necesidades. Las fronteras hacen un buen trabajo mostrando lo que realmente está sucediendo.

Fuente

2008-12-05 09:38:36 MadViking

Está usando posicionamiento absoluto: no estoy seguro de haber visto que enmendé la pregunta después de que @RoBorg la comentó. – cdleary

Pruebe a establecer un ancho a la izquierda de hermanos y un igual padding-right: a la derecha de hermanos

al igual que

<html> 
    <head> 
    <style type='text/css'> 
     #container { 
     width: 500px; 
     } 
     #left-sibling { 
     float: left; 
     width:50px; 
     } 
     #right-sibling { 
     text-align: center; 
     padding-right:50px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='container'> 
     <div id='left-sibling'>Spam</div> 
     <div id='right-sibling'>Eggs</div> 
    </div> 
    </body> 
</html>

Fuente

2008-12-05 09:59:26 adam

Centro uno de los dos divs hermanos

Respuesta

Cuestiones relacionadas