7 Replies Latest reply on Apr 2, 2012 12:47 AM by groove25

    best way to align text in fw

    future-architect Level 1

      What is the best way to align text in Fireworks?  i have tried using the align tab, but it doesn't work out too good for me.  is there any better method of doing this?

        • 1. Re: best way to align text in fw
          groove25 Level 4

          I can't tell whether your question is about text alignment, or difficulties aligning objects (with the Align panel). Do you have an example?


          Text alignment (e.g., in a paragraph) is something you can adjust in the Properties Inspector—but that may not be what you're referring to.


          Text properties.png


          The Align panel is used to align objects (including text objects) with each other. It can be awkward to use sometimes, because it works by extremes and averages. For instance, if you choose the left align option, it aligns all the selected objects to the position of the left-most object. Similarly, if you choose the top align object, it aligns the selected objects to the position of the top-most object. However, if you choose to center align, then it aligns the selected objects to the mean position. (It's different from Illustrator's Align panel, which allows you to select a "key object".)


          A good alternative to the Align panel might be to use Rulers and Guides. If you turn on your Rulers (View > Rulers), you can click and drag from the ruler to the canvas, to add a guide to the canvas and align it to an object. Then you can choose View > Guides > Snap to Guides to make it easier to align other objects to that guide. Text objects are tricky though, because the text box will snap to the guide, and not the text itself. Therefore, you may need to use your eyes to align the objects properly. (The keyboard arrow keys can help you adjust an object's position in small, single-pixel increments.)


          For more info on the Align panel and some alternatives, check out this forum response:



          • 2. Re: best way to align text in fw
            groove25 Level 4

            Here's a tip for using the Align panel—for top, bottom, right, or left alignment.


            If the object to which you're trying to align isn't the outermost object within the selection, simply move the other objects inward until it is. (You can use the Shift key to help you move the objects horizontally or vertically.) Then apply the Align command.


            For example, here I want to left align the blue square to the text. But the text isn't the outermost object; the blue square is. So before I apply the align command, I first move the blue square inward.



            Then I apply the left align command, to align the blue square to the text object. A nice thing about the Align commands is that they align the text itself—not the bounding box—to the other objects. Even so, you might need to shift one or more objects by a pixel or two, to achieve the right visual alignment.



            • 3. Re: best way to align text in fw
              future-architect Level 1

              should have been more specific, sorry...



              the slices are 100px wide, with the document 500 px wide.  i would like to vertically align the text, as well as spread out the links evenly (horizontally).

              • 4. Re: best way to align text in fw
                groove25 Level 4

                To align the text objects vertically with each other, try selecting them and then choosing "Align top edge", with "To Canvas" off. (I don't know why, but "Align vertical center" and "Align bottom edge" both seem to result in misalignments. Pretty bizarre behavior, actually.) If this doesn't work, then try using rulers and guides, as described in my first response.


                To spread out the text objects horizontally, try positioning the first and last objects ("Home" and "Contact") in relation to their slices, then selecting all the text objects and choosing "Distribute horizontal center" to evenly space the remaining items in-between (again with "To Canvas" off). If that doesn't work, then just eyeball it: Use the arrow keys to adjust the horizontal position of each text object until it appears centered.


                This is a perfect example of why Fireworks should support the selection of a "key object". If it did, I'd tell you to select each text object and slice individually, choose the slice as a "key object" and then align horizontal and vertical centers. Unfortunately, that's not an option here.


                Seriously, though, please take the time to be specific when posting future questions. Hopefully, I've given you plenty of ideas and leads on how to solve this.

                • 5. Re: best way to align text in fw
                  future-architect Level 1

                  perfect! thanks, i really appreciate the time you put into explaining all of this for me!

                  • 6. Re: best way to align text in fw
                    groove25 Level 4

                    OK, I've got to correct myself here, I think.


                    I just tried this again, and it appears that you can, in fact, select each text object and slice as a pair (click and drag on the canvas, or Command-click in the Layers panel, to select both together) and use "Align vertical center" and "Align horizontal center" to center the text within the slice. That's much easier than I thought.


                    Here's the caveat: The text has to be positioned inside the slice's bounding box for this to work. But as long as that's the case, it works great.


                    (If any of the text is positioned outside the slice, even if it overlaps by just a small amount, then both objects will shift position, which makes kind of a mess. So, in your example, "Services" clearly overlaps the slice's bounding box. Before aligning it using this method, you'd want to reposition the text closer to the center of the slice, so that there was no overlap.)


                    This makes aligning text within a button or slice a lot easier than I thought. Good to know.

                    • 7. Re: best way to align text in fw
                      groove25 Level 4

                      This is my attempt at re-understanding how the Align commands work. Basically, all the alignments depend upon the aggregate selection, which you can visualize by selecting the objects and then choosing the Scale tool (Q) or Free Transform command (Command-T). If one object is contained by another, then the containing object's boundaries are identical to the aggregate's, and only the inner object will be repositioned (ex. 2). Otherwise, both objects may move, depending on the chosen alignment (ex. 1).



                      Align demo2c.gif