Skip to main content
Solved

Alignment not working

  • October 26, 2023
  • 5 replies
  • 2162 views

olayinkapinmo

Hello there,
I am creating a calendar, everything else seems to work fine except my alignment doesn’t work when I put a double-digit number.

I have tried using the fix height and width but it doesn’t align the number to the middle of the circle.
Screenshot 2023-10-26 113407

Best answer by Haroll

Hi @olayinkapinmo

You should try to use a frame or an auto-layout frame to handle your problem. Frames, unlike groups, have a special feature dedicated to what you trying to achieve and its called constraints.

Frame

You need to group all your item (background, number, dot) in a single frame (select them all and press cmd+opt+G or ctrl+alt+G) once it’s down you can select your text and

  1. On the right panel, constraint section (as shown below) you can specify how you want your item to behave according to the frame size (in your case “center”)
  2. Don’t forget to center align your text also


Auto-layout Frame

While basic Frame let your align items independently of each other, an auto-layout frame will manage the alignment the same way for all items inside. Since you want the text and the dot to be align at the center, it could be a good idea to use this, as adviced by @uipastel

  1. Take the text and the dot and press shift+A to make an auto-layout.
  2. You will need to take care of the background on the auto layout. On the design panel on the right add a Fill and play with the corner-radius so it will be round
  3. Then you can play with the Auto-layout section to align everything at the center (as shown below)

let me know if it helped

View original
This topic has been closed for replies.

5 replies

uipastel
  • New Member
  • 30 replies
  • October 26, 2023

why the size 49x50? in not consistency in your design, you can makes 50x50, put text in shapes, now you can select your eclipse and text using shift (windows) after that click a or shift + a


olayinkapinmo

It still doesn’t work


uipastel
  • New Member
  • 30 replies
  • October 26, 2023

Group 4


Haroll
  • Active Member
  • 273 replies
  • Answer
  • October 26, 2023

Hi @olayinkapinmo

You should try to use a frame or an auto-layout frame to handle your problem. Frames, unlike groups, have a special feature dedicated to what you trying to achieve and its called constraints.

Frame

You need to group all your item (background, number, dot) in a single frame (select them all and press cmd+opt+G or ctrl+alt+G) once it’s down you can select your text and

  1. On the right panel, constraint section (as shown below) you can specify how you want your item to behave according to the frame size (in your case “center”)
  2. Don’t forget to center align your text also


Auto-layout Frame

While basic Frame let your align items independently of each other, an auto-layout frame will manage the alignment the same way for all items inside. Since you want the text and the dot to be align at the center, it could be a good idea to use this, as adviced by @uipastel

  1. Take the text and the dot and press shift+A to make an auto-layout.
  2. You will need to take care of the background on the auto layout. On the design panel on the right add a Fill and play with the corner-radius so it will be round
  3. Then you can play with the Auto-layout section to align everything at the center (as shown below)

let me know if it helped


olayinkapinmo

Thank you so much. it worked perfectly


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings