You may know the CSS declarations text-align and vertical-align. Perhaps you tried alredy to vertically align inline span elements within a div block element but did not succeed yet. I will try explain how to achieve this with a simple button example.
Before:![]()
After: ![]()
Lets begin with the markup for the buttons:
1 2 3 4 5 6 7 8 | <div class="buttons"> <div class="add button"> <span class="icon"><img src="add.png" alt="" /></span><span class="text">Add</span> </div> <div class="delete button"> <span class="icon"><img src="delete.png" alt="" /></span><span class="text">Delete</span> </div> </div> |
Each Button is within a single div. Every button has its icon and a button text. Image and Text are in a span tag. the “add” and “delete” class is added to differentiate the buttons. This is useful if you want to add some behavior in JavaScript.
Next, the CSS styles:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .buttons .button { line-height:16px; /** important **/ height: 16px; padding: 1px; padding-right:5px; margin:0; margin-right:4px; background-color:#a1a1a1; color: #ffffff; border-radius: 2px; /** CSS3 **/ -moz-border-radius: 2px; /** Mozilla specific **/ -webkit-border-radius: 2px; /** Make a guess ;-) **/ float: left; cursor: hand; cursor: pointer; } .buttons .button .icon { display: inline-block; /** important **/ vertical-align:middle; /** important **/ padding:0; margin: 0; margin-right:2px; } .buttons .button .text { display: inline-block; /** important **/ vertical-align:middle; /** important **/ padding:0; margin: 0; } |
The important css declarations and attributes are “display: inline-block”, “vertical-align: middle” and “line-height: XXpx”. The line-height tells every .button block the exact height of the inline elements underneath. The inline elements .icon and .text are handled and displayed as an “inline-block”. Firefox 3 and most of the other major browsers supporting it so it is safe to use it. Read more on this.
The result should look like this:![]()
I think the example is simple enough to adapt it to your needs and other use cases. Please keep in mind that in the example i use -moz-border-radius. This declaration is mozilla specific. So if you want rounded corners in IE you have to wait until IE is implementing this. Take a look when this is scheduled and follow my suggestion.