Ho un div (#wrapper) contenente 2 div in piedi fianco a fianco.

Vorrei che il div di destra fosse allineato verticalmente. Ho provato l'allineamento verticale: al centro sul mio wrapper principale ma non funziona. Mi sta facendo impazzire!

Spero che qualcuno possa aiutarti.

http://cssdesk.com/LWFhW

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>

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

Non hai fortuna con gli elementi flottanti. Non obbediscono all'allineamento verticale,

hai bisogno, display:inline-blockinvece:

http://cssdesk.com/2VMg8

ATTENZIONE

Fai attenzione display: inline-block;perché interpreta lo spazio bianco tra gli elementi come vero spazio bianco. Non lo ignora come display: blockfa.

Raccomando questo:

Imposta l' font-sizeelemento contenitore su 0(zero) e reimposta il font-sizevalore necessario negli elementi in questo modo

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
ul > li {
    font-size: 12px;
}

Guarda una dimostrazione qui: http://codepen.io/HerrSerker/pen/mslay

CSS

#wrapper{
  width:400px;
  height:auto;
  border:1px solid green;
  vertical-align: middle;
  font-size: 0;
}

#left-div{
  width:40px;
  border:1px solid blue;
  display: inline-block;
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

#right-div{
  width:336px;
  border:1px solid red;
  display: inline-block;  
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}
  

Puoi farlo abbastanza facilmente con display table e display table-cell.

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

MODIFICA: In realtà, ho rapidamente smarrito CSS Desk per te - http://cssdesk.com/RXghg

UN'ALTRA MODIFICA: usa Flexbox. Funzionerà ma è piuttosto obsoleto - http://www.cssdesk.com/davf5

#wrapper {
    display: flex;
    align-items: center;
    border:1px solid green;
}

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

#right-div {
    border:1px solid red;
}

Mi rendo conto che questa è una domanda antica, ma ho pensato che sarebbe stato utile pubblicare una soluzione al problema dell'allineamento verticale del galleggiante.

Creando un wrapper attorno al contenuto che vuoi far fluttuare, puoi quindi usare gli pseudo selettori :: after o :: before per allineare verticalmente il tuo contenuto all'interno del wrapper. Puoi regolare la dimensione di quel contenuto quanto vuoi senza che questo influenzi l'allineamento. L'unico problema è che l'involucro deve riempire il 100% dell'altezza del suo contenitore.

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

Una possibile soluzione è creare un wrapper div flexcon elementi allineati su centercome specificato da https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/ .

Faccio del mio meglio per evitare di usare i float ... ma - quando necessario, mi allineo verticalmente al centro usando le seguenti linee:

position: relative;
top: 50%;
transform: translateY(-50%);

L'unico inconveniente delle mie modifiche è che hai un'altezza div impostata ... Non so se questo è un problema per te o no.

http://cssdesk.com/kyPhC