Image to the left, text centered (in page)

Question

I am trying to align an about me page, where i would like an image to the left of the container and the text to the right aligned centered to the page. this is what i've got

<img link img>
<h2>
jack
</h2>
<p>
dummy text
</p>

https://jsfiddle.net/a0sozwjk/1/

 article#main-col { float: left; width: 65%; } .dark { padding: 15px; background: #35424a; color: #fff; margin-top: 10px; margin-bottom: 10px; } .container { width: 80%; margin: auto; overflow: hidden; } article#main-col { float: left; width: 65%; } 

 <center> <Section id="main"> <div class="container"> <article id="main-About-Col"> <h1 class="PTitle">About us</h1> <div class="dark"> <img style="float:left; vertical-align:center;" alt="Jack Picture" width="125px" src="https://thumb1.shutterstock.com/display_pic_with_logo/1000172/291874463/stock-vector-notebook-template-vector-example-of-using-hand-drawn-food-pattern-for-cover-of-cooking-book-291874463.jpg"> <h2> Jack </h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p> </div> </article> </div> </Section> </center> 

Answer 1

Use display flex to make image as vertical center

https://jsfiddle.net/a0sozwjk/4/

 article#main-col { float: left; width: 65%; } .dark { padding: 15px; background: #35424a; color: #fff; margin-top: 10px; margin-bottom: 10px; height: 250px; } .dark .imagediv{ height: 100%; float: left; display: flex; align-items: center; } .container { width: 80%; margin: auto; overflow: hidden; } article#main-col { float: left; width: 65%; } 

 <center> <Section id="main"> <div class="container"> <article id="main-About-Col"> <h1 class="PTitle">About us</h1> <div class="dark"> <div class="imagediv"> <img style="float:left; vertical-align:center;" alt="Jack Picture" width="125px" src="https://thumb1.shutterstock.com/display_pic_with_logo/1000172/291874463/stock-vector-notebook-template-vector-example-of-using-hand-drawn-food-pattern-for-cover-of-cooking-book-291874463.jpg"> </div> <h2> Jack </h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p> </div> </article> </div> </Section> </center> 

Answer 2

I just put the elements in a flexbox, group the text elements in the same flex child, then use align-items: center; !

Does it work for you?

 article#main-col { float: left; width: 65%; } .dark { padding: 15px; background: #35424a; color: #fff; margin-top: 10px; margin-bottom: 10px; display: flex; align-items: center; } .container { width: 80%; margin: auto; overflow: hidden; } article#main-col { float: left; width: 65%; } 

 <center> <Section id="main"> <div class="container"> <article id="main-About-Col"> <h1 class="PTitle">About us</h1> <div class="dark"> <img style="float:left; vertical-align:center;" alt="Jack Picture" width="125px" src="https://thumb1.shutterstock.com/display_pic_with_logo/1000172/291874463/stock-vector-notebook-template-vector-example-of-using-hand-drawn-food-pattern-for-cover-of-cooking-book-291874463.jpg"> <div> <h2> Jack </h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p> </div> </div> </article> </div> </Section> </center> 

Here is a cheatsheet if you don't know about flexboxes yet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Simply wrap the text in a div and add overflow: hidden; like this https://jsfiddle.net/a0sozwjk/2/