storyboard positioning text below image inside a button

I am able to set the image and text for button. But it is aligned horizontally. I want the image and text to be aligned vertically inside the button. i.e., text below the image

How to make these changes using storyboard?

What I want is this:

What I am getting now is this:

If you are looking for output like this

1) Select button and go to Attribute Inspector in your storyboard to get this result of Button size 50*50

2) Now set Title Insets of Button

I've written an extension that do the works for you, Swift 4 compatible.

public extension UIButton {

    func alignTextBelow(spacing: CGFloat = 6.0) {
        if let image = self.imageView?.image {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsetsMake(spacing, -imageSize.width, -(imageSize.height), 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedStringKey.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0.0, 0.0, -titleSize.width)
        }
    }

}

Where spacing is the distance between image and text.

Yes you can do it from storyboard without writing any logic also.

1) Select button and go to Attribute Inspector in your storyboard.

2) Assign Image to the button. (Don't use background Image)

3) Set Title text to that button.

4) Now you need to set edge and Inset so first select image from edge and set Inset as you need and then select title from edge and set inset as per your need.

Hope this helps.

You can easily and visually achieve the alignment using the Edge property of the Button from Property Window(Attribute Inspector) you can change the inset values of Title, and Image as per your need, see image below

Hope it helps.

Cheers.