Два divs выровнены по вертикали рядом с изображением

Question

Я хочу, чтобы изображение аватара с двумя divs справа, которые выровнены по вертикали.

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

Я читал так много сообщений об этом, но ни один из них не кажется, чтобы помочь мне.

Каков наилучший способ иметь изображение слева с 30% ширины основного div (header) и info div с 70% его?

Если какая-либо из info дивы (name или position) имеет слишком много текста, я хочу info ДИВ, чтобы получить вертикально к изображению на его слева. Я также хочу, чтобы этот info div имел запас с изображением.

Я пробовал так много вариантов: float: left на avatar DIV, display: inline-block на обоих avatar и info, width: 30% and 40%. Я не хочу использовать бутстрап для этой цели, поскольку это усложняет ситуацию, и я хочу, чтобы это было максимально простым.

Answer 1

Вы можете использовать либо table-cell как @ w3debugger предложил или вы можете воспользоваться быстрой хак для выравнивания по вертикали:

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

Но нужен родительский .yourclass должно быть position:relative и иметь тип display:block; Если ваш родитель является блоком, он будет занимать высоту блока, который находится внутри него, поэтому аватар, который находится рядом с .yourclass должен быть display:block, а также,

Я редактировал свой пример:

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 Preview:

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

Answer 2

К сожалению, vertical-align не работает с float элементами. Вы должны использовать display: table-cell или `display: inline-block, чтобы соответствовать вашим требованиям.

Пожалуйста, проверьте код, указанный ниже.

.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>