Advanced Search

Vertical align text and image within an unordered list

/ Published in: HTML
Save to your folder(s)
Still needs a little padding at top.

Expand | Embed | Plain Text

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. 		<style>
  7.  
  8. 		ul {
  9. 			margin: 10px;
  10. 			list-style-type: none;
  11. 		}
  12.  
  13. 		ul li {
  14. 			font-size: 20px;
  15. 			padding: 0;
  16. 			margin-top: 10px;
  17. 			margin-bottom: 10px;
  18. 		}
  19.  
  20. 		img {
  21. 			margin-right: 5px;
  22. 			vertical-align: middle;
  23. 			border: 1px solid #ccc;
  24. 			height: 30px;
  25. 			width: 30px;
  26. 		}
  27.  
  28. 		ul li a {
  29. 			text-decoration: none
  30. 		}
  31. 		</style>
  32. 	</head>
  33. 	<body>
  34. 		<ul>
  35. 			<li><a href="#"><img src="" />Text link 1</a></li>
  36. 			<li><a href="#"><img src="" />Test link 2</a></li>
  37. 			<li><a href="#"><img src="" />Text link 3</a></li>
  38. 			<li><a href="#"><a href="#"><img src="" />Text link 4</a></li>
  39. 			<li><a href="#"><img src=""/>Text link 4</a></li>
  40. 		</ul>
  41. 	</body>
  42. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.