Vertical align text and image within an unordered list


/ Published in: HTML
Save to your folder(s)

Still needs a little padding at top.


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Vertical align text and image within an unordered list</title>
  6.  
  7. ul {
  8. margin: 10px;
  9. list-style-type: none;
  10. }
  11.  
  12. ul li {
  13. font-size: 20px;
  14. padding: 0;
  15. margin-top: 10px;
  16. margin-bottom: 10px;
  17. }
  18.  
  19. img {
  20. margin-right: 5px;
  21. vertical-align: middle;
  22. border: 1px solid #ccc;
  23. height: 30px;
  24. width: 30px;
  25. }
  26.  
  27. ul li a {
  28. text-decoration: none
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <ul>
  34. <li><a href="#"><img src="" />Text link 1</a></li>
  35. <li><a href="#"><img src="" />Test link 2</a></li>
  36. <li><a href="#"><img src="" />Text link 3</a></li>
  37. <li><a href="#"><a href="#"><img src="" />Text link 4</a></li>
  38. <li><a href="#"><img src=""/>Text link 4</a></li>
  39. </ul>
  40. </body>
  41. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.