Zwei Divs vertikal neben einem Bild ausgerichtet

Question

Ich möchte ein Avatar Bild mit zwei Divs auf der rechten Seite haben, die vertikal zu ihm ausgerichtet sind.

https://jsbin.com/qafiroquve/1/edit?html,css,output

Ich habe so viele Beiträge über diese Zeilen lesen, aber keiner von ihnen scheint mir zu helfen.

Was ist der beste Ansatz, um das Bild auf der linken Seite mit 30% der Hauptdivs (header) Breite und der info div mit 70% davon zu haben?

Wenn eine der info divs (name oder position) zu viel Text hat, möchte ich die info div vertikal auf das Bild auf der linken ausgerichtet werden. Ich möchte auch das info Div einen Rand mit dem Bild haben.

Ich habe so viele Optionen ausprobiert: float: left auf avatar div, display: inline-block sowohl avatar und info, width: 30% and 40%. Ich möchte Bootstrap für diesen Zweck nicht verwenden, da es die Dinge komplizierter macht und ich möchte es so einfach wie möglich halten.

Answer 1

Sie können entweder table-cell verwenden, wie @ w3debugger vorgeschlagen oder Sie können die Vorteile eines schnellen CSS Hack nehmen vertikal ausrichten:

.yourclass{ 
    position:absolute; 
    top: 50%; 
    transform: translateY(-50%) 
} 

Aber das braucht die Eltern von .yourclass zu sein position:relative und vom Typ display:block; Wenn Ihr Elternteil Block ist, nimmt es die Höhe des Blocks, der darin ist, so der Avatar, der nebenistmuss display:block auch sein,

I edited Ihr Beispiel:

HTML:

<div class="header"> 
    <div class="avatar"> 
     <img src="http://i.imgur.com/pBcut2e.jpg" /> 
    </div><div class="info"> 
     <div class="name">Important person here </div> 
     <div class="position">CHIEF DIGITAL STRATEGIST &amp CO-FOUNDER</div> 
    </div> 
</div> 

CSS:

.header { 
    width: 500px; 
    background: aqua; 
    margin: 0 auto; 
    padding: 10px; 
    position: relative; 
} 
.avatar img { 
    width: 30%; 
    border-radius: 50%; 
} 
.info{ 
    box-sizing: border-box; 
    padding: 0 40px; 


    width: 70%; 

    position:absolute; 
    right: 0; 

    vertical-align: top; 
    top: 50%; 
    transform: translateY(-50%) 

} 

Live-Vorschau:

https://jsbin.com/gogewefizo/1/edit?html,css,output

Answer 2

Leider vertical-align hat nicht mit float Elementen funktioniert. Sie sollten display: table-cell oder `display: inline-block 'verwenden, um Ihre Anforderungen zu erfüllen.

Bitte überprüfen Sie den folgenden Code.

.header { 
 
    width: 500px; 
 
    background: aqua; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: table; 
 
} 
 
.avatar img { 
 
    width: 150px; 
 
} 
 
.avatar, 
 
.info { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="header"> 
 
    <div class="avatar"> 
 
    <img src="http://i.imgur.com/pBcut2e.jpg" /> 
 
    </div> 
 
    <div class="info"> 
 
    <div class="name">Important person here</div> 
 
    <div class="position">CHIEF DIGITAL STRATEGIST &amp CO-FOUNDER</div> 
 
    </div> 
 

 
</div>