Aligning images and text vertically in css
Question
I have a screenshot which I have replicated in the fiddle . At this moment, I am able to replicate everything but images and text are still need to be aligned vertically in one column .
The snippets of HTML code in order to replicate the screenshot are:
<div class="achievement1">
<img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118">
<a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a>
<a href="https://www.businessnewsdaily.com/">- Business News Daily</a>
</div>
I have made a parent div achievements class in which I have placed three child achievements div class.
Problem Statement: I am wondering what CSS codes I should add in the CSS section so that text comes in column and images come in another column as shown in the screenshot.
I tried with display: inline-block and display:block but still I wasn't able to place images and text in one column.
4 answers
solution1
1 ACCPTED 2018-05-19 02:33:47
Check this it's supported by most browsers:
img { display: block; float: left; clear: right; } .achievement3, .achievement2, .achievement1 { width: 100%; display: inline-block; margin: 10px auto; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Testing</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="achievements"> <div class="achievement1"> <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><br> <a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a><br> <a href="https://www.businessnewsdaily.com/">- Business News Daily</a> </div> <div class="achievement2"> <img class="alignleft size-full wp-image-7501" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><br> <a style="color: black;" href="https://www.globalfranchisemagazine.com/advice/case-study/revolutionize-your-franchising">"Revolutionize Your Franchise "</a><br> <a href="https://www.globalfranchisemagazine.com/">- Global Franchise Magazine</a> </div> <div class="achievement3"> <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><br> <a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"Introduces Franchise Community to BPro Platform"</a><br> <a href="http://www.franchiseharbor.com/">- Franchise Harbor</a> </div> </div> </body> </html>
solution2
1 2018-05-19 02:34:10
CSS Flexbox and valid markup you can do this easily
.achievement1 { display: flex; align-items: center; } .caption { margin-left: 30px;} .caption a { display: block; padding-bottom:5px; }
<div class="achievement1"> <div class="figure"> <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"></div> <div class="caption"> <a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a> <a href="https://www.businessnewsdaily.com/">- Business News Daily</a> </div> </div>
solution3
1 2018-05-19 02:39:58
in your css:
.achievement1,
.achievement2,
.achievement3 {
display: flex;
align-items:center;
}
In your snippets, remove the br after the image element and add a div to wrap your text
<div class="achievement1">
<img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118">
<div>
<a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a>
<a href="https://www.businessnewsdaily.com/">- Business News Daily</a>
</div>
</div>
Here is the updated fiddle: https://jsfiddle.net/0rzx731r/16/
solution4
1 2018-05-19 02:40:13
You haven't add styling to the alignleft class that is in the img tag. Add float: left to that class and it works.
.achievement1 { display: inline-block; } .alignleft { float: left; }
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="achievements"> <div class="achievement1"> <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a><br> <a href="https://www.businessnewsdaily.com/">- Business News Daily</a> </div> <div class="achievement1"> <img class="alignleft size-full wp-image-7501" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><a style="color: black;" href="https://www.globalfranchisemagazine.com/advice/case-study/revolutionize-your-franchising">"Revolutionize Your Franchise "</a><br> <a href="https://www.globalfranchisemagazine.com/">- Global Franchise Magazine</a> </div> <div class="achievement1"> <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"Introduces Franchise Community to BPro Platform"</a><br> <a href="http://www.franchiseharbor.com/">- Franchise Harbor</a> </div> </div>
Since you are already using bootstrap, you can make use of bootstrap's grid system which makes it easier.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="achievements"> <div class="row"> <div class="col-sm-3"><img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"></div> <div class="col-sm-9"><a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a><br> <a href="https://www.businessnewsdaily.com/">- Business News Daily</a></div> </div> </br> <div class="row"> <div class="col-sm-3"><img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"></div> <div class="col-sm-9"> <a style="color: black;" href="https://www.globalfranchisemagazine.com/advice/case-study/revolutionize-your-franchising">"Revolutionize Your Franchise "</a><br> <a href="https://www.globalfranchisemagazine.com/">- Global Franchise Magazine</a></div> </div> </br> <div class="row"> <div class="col-sm-3"><img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"></div> <div class="col-sm-9"><a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"Introduces Franchise Community to BPro Platform"</a><br> <a href="http://www.franchiseharbor.com/">- Franchise Harbor</a></div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
vertically aligning text with CSS
Given this css, why isn't this text and images aligning vertically?
Vertically aligning Images with text to the bottom
Vertically Aligning Text Using CSS
Vertically Aligning Text/Images in Tablepress (Wordpress)
Vertically Aligning Text & Images not consistent across browsers
JTextPane vertically aligning text and <img> images with html
Aligning images and text vertically inside div
Vertically aligning image and text on list items with CSS
Vertically aligning a text inside a CSS box
Related Tags