horizontalmente - poner un elemento debajo de otro css



css alinea verticalmente divs flotantes (4)

La única falla de mis modificaciones es que tienes una altura de división establecida ... No sé si eso es un problema para ti o no.

http://cssdesk.com/kyPhC

Hola, tengo un div (#wrapper) que contiene 2 divs uno al lado del otro. Me gustaría que el derecho-div esté verticalmente alineado. Probé vertical-align: medio en mi envoltorio principal, pero no funciona. ¡Me vuelve loco! Espero que alguien pueda ayudar. Gracias de antemano por sus respuestas. Aclamaciones. Bagazo.

http://cssdesk.com/LWFhW

Mi HTML:

<div id="wrapper">
  <div id="left-div">
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>  
  <div id="right-div">
    Here some text...
  </div>
</div>

Mi CSS:

#wrapper{
  width:400px;
  float:left;
  height:auto;
  border:1px solid purple;}

#left-div{
  width:40px;
  border:1px solid blue;
  float:left;}

#right-div{
  width:350px;
  border:1px solid red;
  float:left;}

ul{
  list-style-type: none;
  padding:0;
  margin:0;}

Answer #1

Me doy cuenta de que esta es una pregunta antigua, sin embargo, pensé que sería útil publicar una solución al problema de alineación vertical de flotador.

Al crear un contenedor alrededor del contenido que desea flotar, puede usar los pseudo selectores :: :: after o :: before para alinear verticalmente su contenido dentro del contenedor. Puede ajustar el tamaño de ese contenido todo lo que quiera sin que afecte la alineación. La única pega es que la envoltura debe llenar el 100% de altura de su contenedor.

http://jsfiddle.net/jmdrury/J53SJ/

HTML

<div class="container">
    <span class="floater">
        <span class="centered">floated</span>
    </span>
    <h1>some text</h1>
</div>

CSS

div {
    border:1px solid red;
    height:100px;
    width:100%;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.floater {
    float:right;
    display:inline-block;
    height:100%;
    box-sizing: border-box;
}
.centered {
    border:1px solid blue;
    height: 30px;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
h1 {
    margin:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
    height:100%;
    content:'';
    font-size:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}

Answer #2

Puede hacerlo fácilmente con la tabla de visualización y visualizar la celda de tabla.

#wrapper{
  width:400px;
  float:left;
  height:auto;
  display: table;
  border:1px solid green;
}

#right-div{
  width:356px;
  border:1px solid red;
  display: table-cell;
  vertical-align: middle;
}

EDITAR: En realidad, se metió rápidamente en CSS Desk para usted - http://cssdesk.com/RXghg






css