Three20: Image located above text within TTButton using TTStyles
===

I'm trying to style a TTButton to appear like the following:

http://tinypic.com/r/29c3oyh/6

You'll notice that the image and the text are both center aligned within the TTButton and that the image is above the text. No matter what combination of TTBoxStyle and ordering, I can't seem to get the correct alignment of both the image and text simultaneously.

    - (TTStyle*)happyfaceIcon:(UIControlState)state {
    return [TTImageStyle styleWithImageURL:nil defaultImage:nil contentMode:UIViewContentModeCenter size:CGSizeMake(40, 40) next:
            [TTBoxStyle styleWithMargin:UIEdgeInsetsMake(0, 20, 0, 0) next:nil]];
    }
    
    - (TTStyle*)happyfaceButton:(UIControlState)state {
    return [TTShapeStyle styleWithShape:[TTRectangleShape shape] next:
            [TTSolidBorderStyle styleWithColor:[UIColor blackColor] width:1 next:
             [TTSolidFillStyle styleWithColor:[UIColor grayColor] next:
              [TTBoxStyle styleWithMargin:UIEdgeInsetsMake(45, 2, 5, 2) next:
               [TTTextStyle styleWithFont:[UIFont boldSystemFontOfSize:10]
                                    color:[UIColor blackColor] textAlignment:UITextAlignmentCenter next:
                [TTPartStyle styleWithName:@"image" style:TTSTYLESTATE(happyfaceIcon:, state) next: nil
                 ]]]]]];
    }
