Jump to content
View in the app

A better way to browse. Learn more.

FMForums.com

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Aligning / Centering Objects & Text

Featured Replies

Really simple question!

If I'm needing to truly align two objects, my intuition tells me they should both be an odd number of pixels in size, or both even. Would that be right?

Okay -- follow up question. If I'm wanting text in an Edit box to be centered vertically -- in other words, no closer to the top of the text box than the bottom -- . . . or to *appear* centered to the eye (which may not be the same answer - as framers often mat the bottom edge of a painting slightly fatter than the top) . . . . should the text box be odd and the font size also odd, or . . . ?

Similar question arises when I have a text label I want to align centrally next to a field box. Odd font size, odd pixel box?

I'm asking this because I'm always eyeballing these issues, and I do it over and over by trial and error and am trying to get a general principal I can apply. I'd think this is a common design issue.

Are there any 'best practices out there on this?

Hope this doesn't seem too fanatical.

Thanks!

Really simple question!

If I'm needing to truly align two objects, my intuition tells me they should both be an odd number of pixels in size, or both even. Would that be right?

Okay -- follow up question. If I'm wanting text in an Edit box to be centered vertically -- in other words, no closer to the top of the text box than the bottom -- . . . or to *appear* centered to the eye (which may not be the same answer - as framers often mat the bottom edge of a painting slightly fatter than the top) . . . . should the text box be odd and the font size also odd, or . . . ?

Similar question arises when I have a text label I want to align centrally next to a field box. Odd font size, odd pixel box?

I'm asking this because I'm always eyeballing these issues, and I do it over and over by trial and error and am trying to get a general principal I can apply. I'd think this is a common design issue.

Are there any 'best practices out there on this?

Hope this doesn't seem too fanatical.

Thanks!

Yes you are right, but in the end if it looks OK on screen then its good enough for me. If it looks centred then it is.

I'm big on consistency, so that the solution develops a "language" that the users can understand. For example, fields that can be modified are black text on white background. If the text cannot be modified then it's black text on a grey bg. If the field requires entry then then field's bg is lurid, poke-you-in-the-eye pink that changes to white when an entry is made (cheap and easy with conditional formatting). This colour coding is used consistently through the solution so the user learns what they can change and what they cannot, and what fields need entries.

Good response, Vaughan. I too use similar field coding; thank heavens for conditional formatting, huh?

Wickerman, I commend your pickiness. Truly. I had never thought about it before and it seems like it would certainly matter!! And now I too will begin to match the even/odd scenario. Good one!! Thank you!

Too fanatical? Not for me but then I live on the outer fringe of reality most times. :jester:

  • Author

What a pleasure to encounter people who care about such things.

Vaughan -- I totally agree that your consistency approach is really essential to good design, and can actually have a powerful effect on how the user understands his data. I'm working on an inherited project where field data from related tables are presented in a data entry layout in Text boxes that look exactly like the fields native to the current context. The users have had only a vague idea that when they changed data in these fields, the data would be different in other parts of the database.

I wish that there were more resources out there that address these kinds of "user-oriented design" issues and techniques / best practices for things like field alignment, relative font sizes and appropriate styles, color deployment, etc. I often see highly "accomplished" solutions that just look like they would be soul-destroying to use day-to-day.

I've been to 2 Devcons but even there have seen precious little in the way of strong concrete principles and examples. Any resources you could point to for us design Nerds?

The Human Interface Guidelines are a good place to start. They are published by both Apple and Microsoft for their respective operating systems.

Also, copy what everybody else is doing (that works) and not try to re-invent everything yourself.

Create an account or sign in to comment

Important Information

By using this site, you agree to our Terms of Use.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.