CODEWITHSUNDEEP
swiftuibuttonvertical-alignment
j.TK
j.TK

Reputation: 223

UIButton label text vertical alignment for plus (+) and minus (-)

I have a circular button with label texts "+" and "-". It's not properly aligned vertically.

I am already doing

button.contentVerticalAlignment = UIControlContentVerticalAlignment.center

Please help to align it to the centre (vertically).

button with incorrect text alignment

Upvotes: 3

Views: 1084

Answers (2)

glyvox
glyvox

Reputation: 58069

The root cause of the problem is that the characters have uneven top and bottom "margins". Use a fullwidth plus sign and a fullwidth hyphen-minus instead.

Here are those characters for easier copy-pasting:

＋ －

Result:

screenshot from the buttons with the characters mentioned above

Upvotes: 14

Dorji Tshering
Dorji Tshering

Reputation: 1021

Use display-flex on the button and use the value of line-height to position the plus or minus sign vertically within the button. Increase in line-height value moves the signs downward and and decrease in line-height value moves the signs upward. Thanks!

This answer is based on the practical behavior of concerned css properties to achieve vertical align of minus sign and plus sign inside button(I haven't tried for other elements like span or div but I believe it works the same, if not pardon my guess) upon increasing the font-size(to any extent) regardless of font-family used.

Use Case: Sometimes you want bigger buttons with a plus or minus sign inside it. But the font-size is too small for the button. As you increase the font-size of the button, the plus and minus sign fails to align vertically as was the case with me. That's when I came up with the following solution.

Note: I could't find a solution anywhere else, so I ended up with this solution. I am open to any say you have on the solution so feel free to leave some comments:)

/* common style */
button {
   height: 50px;
   width: 200px;
   background: #216AFF;
   color: white;
}

.minus {
  font-size: 70px;
  display: flex;
  justify-content: center;
  line-height: 35px;
}

.plus {
  font-size: 50px;
  display: flex;
  justify-content: center;
  line-height: 45px;
}
<button class="minus">-</button>
<br>
<button class="plus">+</button>

Upvotes: 0

Related Questions