Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html>
<html>
<head>
<style>
.p_status {background-color: lightgray; padding: 5px;}
.s_id {color: black; font-weight: bold; vertical-align: middle;margin: 0 30px;}
.status {padding: 0 0px; margin: 0 30px; background-color: white; vertical-align: middle;}
</style>
</head>
<body>
<p class="p_status">
<span class="s_id">S1</span>
<img class="status" src="greendot.jpg" height="25" width="25" />
<img class="status" src="reddot.jpg" height="25" width="25" />
</p>
<p class="p_status">
<span class="s_id">S2</span>
<img class="status" src="greendot.jpg" height="25" width="25" />
<img class="status" src="reddot.jpg" height="25" width="25" />
</p>
</body>
</html>
|
Result
Reference:
Vertical align img and text inside <p>
http://stackoverflow.com/questions/5219324/vertical-align-img-and-text-inside-p
http://jsfiddle.net/audetwebdesign/dCAkx/
No comments:
Post a Comment