Vertically alignment Button text is not centered


#1


As you can establish the text of the buttons is not aligned in the center, but a little bit more to the top. That’s why i also need to bring all the icons more to the top, but it’s not nice designed. Does somebody know how to solve this?


#2

First of all, your text should be set on the button widget itself. Set the button widget’s padding style to Top: 0, Bottom: 0 and Align: Middle. I recommend setting the button to “Fit to Width” (little icon next to the width and height in the LOCATION AND SIZE section of the STYLE pane) and setting the padding style to accommodate the large Left and Right padding (looks like 100 px or so in your screenshot.)

If that doesn’t fix things enough, realize that different fonts can use different baselines, and different web browsers can render fonts just a little differently. It can be a little bit of a trick to get alignment just right. I recommend creating a guide and dragging it to where you need the baseline. Then, increase the Bottom or Top padding from 0 until it the text lines up with your guide. View it in your preferred browser and adjust as necessary. Realize that text positioning can vary from browser to browser and OS to OS. If you really want it to look exact everywhere, you can set it up in the Axure editor, copy the widget, right click on the page and select “Paste as Image”.