Ich habe eine Div (#wrapper) mit 2 Divs, die nebeneinander stehen.

Ich möchte, dass das rechte Div vertikal ausgerichtet ist. Ich habe versucht, vertikal auszurichten: Mitte auf meinem Haupt-Wrapper, aber es funktioniert nicht. Es macht mich verrückt!

Hoffe jemand kann helfen.

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

Sie haben kein Glück mit schwebenden Elementen. Sie gehorchen nicht vertikal ausgerichtet,

Sie brauchen display:inline-blockstattdessen:

http://cssdesk.com/2VMg8

IN ACHT NEHMEN

Seien Sie vorsichtig, display: inline-block;da es den Leerraum zwischen den Elementen als echten Leerraum interpretiert. Es ignoriert es nicht wie es display: blocktut.

Ich empfehle dies:

Setzen Sie das font-sizedes enthaltenden Elements auf 0(Null) und setzen font-sizeSie es in den Elementen wie folgt auf den gewünschten Wert zurück

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

Eine Demonstration finden Sie hier: 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;
}
  

Sie können dies ganz einfach mit Anzeigetabelle und Anzeigetabellenzelle tun.

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

EDIT: Eigentlich schnell auf CSS Desk für Sie herumgespielt - http://cssdesk.com/RXghg

EINE ANDERE BEARBEITUNG: Verwenden Sie Flexbox. Dies wird funktionieren, ist aber ziemlich veraltet - 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;
}

Mir ist klar, dass dies eine alte Frage ist, aber ich dachte, es wäre nützlich, eine Lösung für das Problem der vertikalen Ausrichtung des Schwimmers zu veröffentlichen.

Durch Erstellen eines Wrappers um den Inhalt, den Sie schweben lassen möchten, können Sie dann die Pseudoselektoren :: after oder :: before verwenden, um Ihren Inhalt innerhalb des Wrappers vertikal auszurichten. Sie können die Größe dieses Inhalts beliebig anpassen, ohne dass dies die Ausrichtung beeinträchtigt. Der einzige Haken ist, dass die Hülle 100% der Höhe ihres Behälters füllen muss .

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

Eine mögliche Lösung besteht darin, einen Wrapper div flexmit Elementen zu erstellen, centerdie gemäß https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/ ausgerichtet sind .

Ich gebe mein Bestes, um die Verwendung von Schwimmern zu vermeiden ... aber - bei Bedarf richte ich mich mit den folgenden Linien vertikal zur Mitte aus:

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

Der einzige Nachteil meiner Modifikationen ist, dass Sie eine festgelegte Div-Höhe haben ... Ich weiß nicht, ob das ein Problem für Sie ist oder nicht.

http://cssdesk.com/kyPhC