Geek Answers Handbook

Two divs vertically aligned next to the image

I want an avatar image with two divs on the right that are vertically aligned.

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

I read so many posts about this, but none of them seem to help me.

What is the best approach for the image to be on the left with 30% of the width of the main div ( header ) and div info with 70% of it?

If any of the info divs ( name or position ) has too much text, I want the div info be vertically aligned with the image on the left. I also want this info div to have stock with image.

I tried so many options: float: left on avatar div, display: inline-block on avatar and info , width: 30% and 40% . I do not want to use bootstrap for this purpose, as it complicates things, and I want it to be as simple as possible.

+5
source share
2 answers

You can use either table-cell , as suggested by w3debugger, or you can use css quick hack to align vertically:

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

But this requires that the parent .yourclass element be position:relative and have the type display:block; . If your parent is a block, it will occupy the height of the block that is inside it, so the avatar that is next to .yourclass should also be display:block ,

I edited your example:

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

+3
source

Unfortunately, vertical-align did not work with float elements. You should use display: table-cell or `display: inline block to fit your requirements.

Please check the code below.

 .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>
+2
source

More articles:


All Articles