`el` accepts `center` but ignores it

[rtfeldman]

The big picture of what I'm trying to do

I'm making a thing that looks like this:

The first thing I tried to get whee! centered in the middle led to a surprising result.

What I did

 el Elm [ width (fillPortion 1), center ] (text "whee!")

I put this in the middle of a row. The element to the left ("Title" in the screenshot) had alignLeft and the element to the right ("rtfeldman" in the screenshot) had alignRight.

All three had width (fillPosition 1). My intention was to center this middle one with center.

What I Expected To Happen

"whee!" would get centered, like in the screenshot. (The screenshot shows what I was going for, not what this code actually did.)

What Actually Happened

"whee!" was left-aligned within its container element like so:

When I swapped el for row, with no other changes, the layout worked as I'd hoped:

This suggests passing center to el compiles but has no effect. I would have expected that either:

• center would center things with el the same way it does with row
• passing center to el would not type-check (I suspect this is achievable!)

Versions

• Elm: 0.18
• style-elements: 4.1.0
• Browser: Chrome 61.0.3163.100 (Official Build) (64-bit)
• Operating System: macOS Sierra 10.12.6

[thorebear]

According to the documentation passing center to a singular element like el will affect the alignment of the individual element, not the child of the element. So I think this is the expected behavior.

[thorebear]

To clarify: You get the element centered, if you remove the width attribute, since the el element will have space to "center" in.

[mdgriffith]

This issue inspired an overhaul for how alignment works under the hood for v5...so, that's awesome! 😄