Forums » Help »

WPushBotton with icon and text - centering the text vertically.

Added by Daniel Paull 11 months ago

I have created a WPushButton with an icon and icon is taller than the text. When rendered, the text is aligned with the bottom of the image while I would like it to be aligned centred vertically. Is there any way to do this? being able to control spacing between the text and the icon would be nice also.

I am currently using wt-3.1.7a. From the online documentation it doesn't look like the API has changed in newer versions.

Cheers,

Dan


Replies

RE: WPushBotton with icon and text - centering the text vertically. - Added by Daniel Paull 11 months ago

... screen shot of button attached.

Capture.PNG - screen grab (6.3 KB)

RE: WPushBotton with icon and text - centering the text vertically. - Added by Koen Deforche 11 months ago

Hey Daniel,

In latest git, I believe we have fixed hits, using a CSS rule:

button img {
  vertical-align: middle;
}

Regards,
koen

RE: WPushBotton with icon and text - centering the text vertically. - Added by Daniel Paull 11 months ago

Thanks Koen - that was easy!

I added a little padding between the image and text and it looks nice.

button img {
 vertical-align: middle;
 padding: 0px 10px 0px 0px;
}

Would you consider adding some padding in the standard style sheet?

Cheers,

Dan

RE: WPushBotton with icon and text - centering the text vertically. - Added by Koen Deforche 11 months ago

Hey Dan,

I'll make the change to git after this release. And see if we get objections because it is a tiny change in behaviour (the vertical-alignment was actually a subtle regression because of swithcing to HTML5 doctype).

Regards,
koen