Fix text align

[campaul]

Fix for #410 and a prerequisite for finishing #403
Edit: this does have some interactions with #403 but turns out the fixes can be implemented independently.

There are two components to this change:

1. Only apply text alignment if the element being aligned is inline or inline-block.
2. Use the alignStlye from the container instead of from the element being aligned.

This PR also expands test/text-align-center.html with test cases for some other common scenarios

[campaul]

The text-align-center test is currently failing due to imperceptible differences in font rendering. There are a few pixels different in the "r" at the end of "inner" in the 4th example and the "r" at the end of outer in the 5th example. This issue also isn't consistent across systems, as the test actually passes for me on some of the devices I've checked.

Do you think we should consider this a bug and try to get the font rendering identical, or would it be reasonable to add a small fuzz value to the comparison check? I've found a value of -fuzz 6% is enough to make this test pass.

Test

Reference

[rodarima]

Interesting, not sure what is causing those differences. I'm leaving here a magnified picture of the problem:

I would be inclined to think that they use floating point numbers internally to store the position of each glyph and there may be some rounding effects moving the r slightlighly to the right, causing the problem in one case but not in the other. It would be heavily dependant on your platform and the specific versions of the rendering libraries you use underneath.

Could we reduce the text length (say to one word only) and see if the problem goes away? I would prefer not adding fuzzing as that may conceal other problems.

[campaul]

Changing inner/outer to internal/external seems to have done the trick. Based on some other testing I did it seems like the issue has more to do with specific words than the length of the string.

[rodarima]

Thanks, this looks great!