DarkxPunk Posted January 23, 2018 Share Posted January 23, 2018 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 More sharing options...
Ingolme Posted January 23, 2018 Share Posted January 23, 2018 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 More sharing options...
dsonesuk Posted January 23, 2018 Share Posted January 23, 2018 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> <html> <head> <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"> </script> <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; } </style> </head> <body> <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. </p></div></div> </body> </html> Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 26, 2018 Author Share Posted January 26, 2018 Thanks for both your input. It seems we always need to wrap it XD. Dsonesuk your method is the one I use most often. Hope to see some other ideas from others. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now