Hai div được căn chỉnh theo chiều dọc bên cạnh hình ảnh

Question

Tôi muốn có hình đại diện với hai div ở bên phải được căn chỉnh theo chiều dọc.

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

Tôi đã đọc rất nhiều bài viết về vấn đề này, nhưng không ai trong số họ có vẻ để giúp tôi.

Cách tiếp cận tốt nhất để có hình ảnh ở bên trái với 30% chiều rộng của div chính (header) chiều rộng và info div với 70% của nó?

Nếu một trong các info divs (name hoặc position) có quá nhiều văn bản, tôi muốn info div để căn chỉnh theo chiều thẳng đứng với hình ảnh ở bên trái. Tôi cũng muốn điều này info div để có lề với hình ảnh.

Tôi đã thử rất nhiều lựa chọn: float: left trên avatar div, display: inline-block trên cả avatar và info, width: 30% and 40%. Tôi không muốn sử dụng bootstrap cho mục đích này vì nó làm phức tạp mọi thứ và tôi muốn giữ nó đơn giản nhất có thể.

Answer 1

Bạn có thể sử dụng một trong hai table-cell cách @ w3debugger gợi ý hoặc bạn có thể tận dụng lợi thế của một css hack nhanh chóng để sắp xếp theo chiều dọc:

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

Nhưng mà cần phụ huynh của .yourclass là position:relative và thuộc loại display:block; Nếu cha mẹ của bạn bị chặn, nó sẽ lấy chiều cao của khối nằm bên trong nó, do đó hình đại diện bên cạnh .yourclass cần phải được display:block là tốt,

tôi thay đổi nội dung ví dụ của bạn:

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

} 

Xem trước trực tiếp:

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

Answer 2

Thật không may, vertical-align không hoạt động với các yếu tố float. Bạn nên sử dụng display: table-cell hoặc `display: inline-block để đáp ứng các yêu cầu của bạn.

Vui lòng kiểm tra mã bên dưới.

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