Bir resmin yanında dikey olarak hizalanmış iki div,

Question

Sağında iki dikey hizalanmış bir avatar resmi olmasını istiyorum.

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

Bu konuda pek çok mesajları okudum, ama bunların hiçbiri bana yardım görünüyor.

Ana divun (header) genişliğinin% 30'u ve resmin% 70'i ile info div ile soldaki görüntüye sahip olmanın en iyi yolu nedir?

info div (name veya position) birini çok fazla metin varsa

, ben info div dikey olarak solda görüntüye hizalanmış olsun istiyorum. Ayrıca bu info div görüntüsüyle bir kenar boşluğu olmasını istiyorum.

O kadar çok seçenek denedim: float: leftavatar üzerine div, hem avatar ve info, width: 30% and 40% üzerine display: inline-block. Bu amaçla bootstrap kullanmak istemiyorum, çünkü işleri karmaşıklaştırıyor ve olabildiğince basit tutmak istiyorum.

Answer 1

ya table-cell nasıl w3debugger önerdi yoksa dikey hizalama için hızlı bir css hack yararlanabilir @:

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

Ama bu .yourclass üst öğesini ihtiyacı position:relative olmak ve display:block; türünde olmak Eğer ebeveyniniz blok ise, içindeki bloğun yüksekliğini alacaktır, yani avatar,'nın yanındaki

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%) 

} 

Canlı önizleme:

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

Ben senin örneğini düzenlenmiş yanı display:block olması gerekir 0

Answer 2

Ne yazık ki, vertical-align öğeleri float öğeleri ile çalışmadı. Gereksinimlerinizi karşılamak için display: table-cell veya `display: inline-block kullanmalısınız.

Lütfen aşağıdaki kodu kontrol edin.

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

kullanabilirsiniz