Tengo algo como la siguiente situación:

<div id="container">
  <div id="prev">
    prev
  </div>
  <div id="content">
    some content
  </div>
  <div id="next">
    next
  </div>
</div>

Donde lo que me gustaría es que el resultado es algo como esto:

Centrado verticalmente en relación a otro elemento en css?

Nota que prev y next se centra verticalmente en referencia a los Contenidos y que todo está centrado horizontalmente en la página.

Lo siento si esto ha sido cubierto antes pero parece ser que hay un montón de maneras diferentes para hacer cosas similares y estoy seguro de que se aplican a esta situación. CSS3/HTML5 no es realmente un problema tan largo como funciona en Chrome, Safari, Firefox y tal vez IE (no fundamental).

EDIT: También, no estoy seguro de si esto es realmente claro en la pregunta, pero no sé el tamaño de Contenido. Podría ser cualquier cosa.

EDIT 2: Además, el contenido es generalmente una imagen.

InformationsquelleAutor Paul Wicks | 2011-10-06

3 Comentarios

  1. 1

    Hay un par de maneras de hacer esto, mi elección es el uso de display: table-cell en el recipiente y en el vertical-align: middle. el problema es que no se puede poner de posición absoluta en el contenedor:

    #container {
      border: solid #000 1px;
      display: table-cell;
      vertical-align: middle;
      height: 400px;
      width: 400px;
      text-align: center;
    }
    
    #container div {
      display: inline-block;
    }
    
    #content {
       border: solid #000 1px;
       padding: 10px;
       width: 200px;
    }

    Funciona en IE8+ y navegadores modernos.

    http://jsfiddle.net/E97yY/

  2. 0

    Otro enfoque, esta vez utilizando posicionamiento absoluto, si usted está dispuesto a cambiar su estructura de HTML un poco. Tenga en cuenta que los botones Prev y Next podría estar en cualquier lugar dentro de la div de contenido, incluso fuera de la div de contenido si usted desea usar su contenedor para limitar el ancho, o tal vez añadir otro ancho de restricción de la envoltura. (Realmente no es necesario, me imagino.)

    Nota: he eliminado todos los innecesarios margen de esta respuesta. Ver el violín para un visiblemente funcionamiento ejemplo.

    El violín

    El HTML:

    <div id="container">
        <div id="content">
            <div id="prev">prev</div>
            <div id="next">next</div>
            some content
        </div>
    </div>

    El CSS:

    #content {
        margin:0 auto;
        position:relative;
    }
    #prev, #next {
        position:absolute;
        width:40px;
        height:20px;
        top:50%;
        margin-top:-10px; /* negative half of height */
    }
    #prev {
        left:-45px; /* negative [width plus any desired padding] */
        text-align:right;
    }
    #next {
        right:-45px; /* negative [width plus any desired padding] */
        text-align:left;
    }
  3. 0

    La mejor manera de centro de los elementos es el uso de inline-blocks y vertical-align.

    Aquí es un violín para empezar: http://jsfiddle.net/kizu/7Qj3G/

    Aquí se establece display: inline-block a los elementos necesarios, agregar vertical-align: middle a ellos y está casi terminado.

    Los restantes cosa es que si usted necesita la ayuda en IE, entonces usted necesitará para «encender» la inline-block comportamiento de elementos a nivel de bloque mediante display: inline; zoom: 1; en ellos.

Dejar respuesta

Please enter your comment!
Please enter your name here