Fritz Thomas

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.