Having trouble aligning an image with link and text via html and css

Question

Codepen example

In this case I'm wanting the image to be on the left then the authors name centered next to the image and then below those I'm trying to center the buttons. I had the picture and the buttons centered but when I add the authors name it all goes off.

Also how would I go about make everything a bit smaller. I've tried adjusting the height and width but then the author image ends up outside the section.

 .authorbio { background-color: #000; border-radius: 10px; border: 4px dotted #870505; line-height: 50px; width: 55%; height: 55%; margin: 0 0 10px 10px; } .authorbio>h1 { vertical-align: right; text-align: center; } .authorbio>img { border: 1px solid #870505; border-radius: 20px; width: 150px; height: 150px; margin: 10px; vertical-align: middle; } /* social links --------------------------------------- */ a.sociallinks { -webkit-border-radius: 5px 5px; border: solid 1px rgb(0, 0, 0); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(76, 68, 68)), to(rgb(22, 21, 21))); color: #ccc; text-decoration: none; text-align: center; display: inline-block; padding: 2px 2px; font-size: 20px; font-weight: bold; } a.sociallinks:hover { -webkit-border-radius: 5px 5px; border: solid 1px rgb(0, 0, 0); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(224, 0, 0)), to(rgb(61, 2, 2))); color: #ccc; text-decoration: none; text-align: center; display: inline-block; padding: 2px 2px; font-size: 20px; font-weight: bold; } a.sociallinks:visited { -webkit-border-radius: 5px 5px; border: solid 1px rgb(0, 0, 0); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(96, 96, 96)), to(rgb(2, 2, 2))); color: #000; text-decoration: none; text-align: center; display: inline-block; padding: 2px 2px; font-size: 20px; font-weight: bold; } a.sociallinks:active { -webkit-border-radius: 5px 5px; border: solid 1px rgb(0, 0, 0); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(30, 30, 30)), to(rgb(70, 70, 70))); color: #ccc; text-decoration: none; text-align: center; display: inline-block; padding: 2px 2px; font-size: 20px; font-weight: bold; } 

 <div class="authorbio"> <img src="https://images-na.ssl-images-amazon.com/images/I/61mO3gFua5L._UX250_.jpg" alt="Paula Cappa" /> <h1><a href="https://www.goodreads.com/author/show/6553133.Paula_Cappa" target="_blank" title="Paula Cappa on Goodreads">Paula Cappa</a></h1> <br /><a class="sociallinks" href="http://www.amazon.com/Greylock-Paula-Cappa-ebook/dp/B0168XVNZS/ref=cm_cr_pr_product_top?ie=UTF8" rel="nofollow" target="_blank" title="Greylock on Amazon">Amazon</a> <a class="sociallinks" href="http://www.facebook.com/paula.cappa.94" target="_blank" title="Author Paula Cappa on Facebook">Facebook</a> <a class="sociallinks" href="https://www.goodreads.com/book/show/26887306-greylock" target="_blank" title="Greylock on Goodreads">Goodreads</a> <a class="sociallinks" href="https://www.smashwords.com/books/view/582884" target="_blank" title="Greylock on Smashwords">Smashwords</a> <a class="sociallinks" href="https://twitter.com/PaulaCappa1" target="_blank" title="Paula Cappa Twitter">Twitter</a> <a class="sociallinks" href="https://paulacappa.wordpress.com/" target="_blank" title="Paula Cappa Wordpress">Website</a> </div> 

Answer 1

Check this working Codepen example

I just made the title inline-block and adjusted the width accordingly with the useful calc property.

 .authorbio>h1{ vertical-align: right; text-align: center; display: inline-block; width: calc(100% - 175px); /* substract the image's width + some extra */ } 

Then put the links inside a container to apply some flex properties ( justify-content: center did the magic).

 <div class="sociallinks-container"> <!-- put your links here --> ... </div> 

 .sociallinks-container { display: flex; flex-wrap: nowrap; /* this prevents the items wrapping to another line */ justify-content: center; /* this centers the links */ } 

Answer 2

try this one, you have only to replace image and link addresses.I wrote a full code for you.try this.if this is not the case tell me.

 <!DOCTYPE html> <html> <head> <title>hover</title> <style type="text/css"> body{ margin:0; padding:0; } div.bio{ width: 500px; height: 400px; margin: 1%; padding: 10px; background-color: black; border: 3px dotted red; border-radius: 5px; } div.autorimage{ width: 150px; height: 150px; border: 2px solid red; box-shadow: 1px 2px 1px white; border-radius: 5px; } div.autorimage img{ width: 100%; height: 100%; } div.authorlink{ width: 100%; text-align: center; } div.authorlink a{ font-size: 45px; } div.authorlink a:hover{ text-decoration: none; color: red; } div.buttonsetone{ width: 100%; } div.buttonsettwo{ width: 100%; margin-top: 50px; } div.buttonsetone div{ width: auto; background-color: gray; text-align: center; float: left; margin-left: 3%; padding: 1%; border: 1px solid white; border-radius: 5px; } div.buttonsetone div:hover{ background-color: red; } div.buttonsetone div a{ text-decoration: none; color: white; font-size: 35px; } div.buttonsettwo div{ width: auto; background-color: gray; text-align: center; float: left; margin-left: 3%; padding: 1%; border: 1px solid white; border-radius: 5px; } div.buttonsettwo div:hover{ background-color: red; } div.buttonsettwo div a{ text-decoration: none; color: white; font-size: 35px; } </style> </head> <body> <div class="bio"> <div class="autorimage"><img src=""></div><br/> <div class="authorlink"><a href="#">Paula Cappa</a></div><br/> <div class="buttonsetone"> <div><a href="#">Amazon</a></div> <div><a href="#">Facebook</a></div> <div><a href="#">Goodreads</a></div> </div><br/> <div class="buttonsettwo"> <div><a href="#">Smashwords</a></div> <div><a href="#">Twitter</a></div> <div><a href="#">WebSite</a></div> </div> </div> </body> </html>