Jump to content

Eloquent way to vertically align text and images


Recommended Posts

Hey there, so I am faced as I usually am with the dilemma of aligning an image vertically with two sets of text. So the typical image on the left, a title and paragraph on the right.

We have all heard the number of solutions, wrapping the text up as one element and using vertical-align: middle, but thats adding more elements. There is using a table and table cells markup which just isn't right cuz this data is not table data. I have heard ideas of using flex but never quite able to follow the two text elements stacking. There are probably many others you could think of.

I am making this post to reach out and see if anyone else has found a more eloquent solution yet. I have done my research and haven't found anything too enticing, but we all know we find solutions and sometimes forget to share them with the world.

Be cool to hear from the community if anyone has found the secret ingredient to make this work without all the incorrect usage of styles and the addition of more elements on the page.

Hope to hear some amazing things,
- Michael

Link to comment
Share on other sites

Flexbox works, and setting the display of elements to table-cell using CSS also works, which is not the same as using an HTML <table> element. The vertical-align method works as well. All the solutions are going to require you to have one element wrapped around all the text.

Link to comment
Share on other sites

You don't need flex or table styling, vertical-align will achieve that on its own, but you do require container that will use display: inline-block around title(h4?) and paragraph for stacking, which I think is what you meant. With max-width to prevent text extending beyond that of container boundary width.

<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        <style type="text/css">
            .vert-align { text-align: center; }
            .vert-align > * {vertical-align: middle; display: inline-block; padding: 0 1%; text-align: left; max-width: 73%;}
            .vert-align img:first-child {max-width: 23%; min-width: 290px; }
        <div class="vert-align"><img src="https://www.w3schools.com/html/pulpitrock.jpg"/><div><h4>Header TODO write content</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...