包装行中的elm-ui中心元素

洛根·韦特（Logan Waite）

我在mdgriffiths / elm-ui中使用Elm，我真的很喜欢它。现在，我正在尝试创建居中的，环绕的元素行：

我可以理解到这一点：

使用此代码：

button : String -> String -> Element Msg
button label url =
    link
        [ height (px 150)
        , width (px 150)
        , Border.width 1
        , Background.color (rgb255 255 255 255)
        ]
        { url = url
        , label =
            Element.paragraph
                [ Font.center ]
                [ textEl [] label ]
        }


row : Element Msg
row =
    Element.wrappedRow
        [ Element.spacing 25
        , Element.centerX
        , Element.centerY
        , width (fill |> Element.maximum 600)
        , Font.center
        ]
        [ button "A" "/a"
        , button "B" "/b"
        , button "C" "/c"
        , button "D" "/d"
        ]

但是当我尝试将Element.centerX添加到我的按钮时

link
    [ Element.centerX
    , ...
    ]

我得到这个代替：

我也尝试了Font.center失败，而且我不知道还能尝试什么。

我不确定是否丢失了我应该使用的东西，或者是否需要重新整理整个东西，或者我是否只需要使用内置的CSS东西。

更新：

链接到我看到的问题的Ellie。

https://ellie-app.com/7NpM6SPfhLHa1

5ndG

这个Github问题对这个问题很有用。恐怕您将不得不使用一些CSS（除非我丢失了某些东西）。我以前在elm-ui上找到过这个；时不时地无法完全满足您的需求，并且需要一些CSS。

这对我有用（摘自上面链接中AlienKevin的帖子）。您需要将“ marginLeft”和“ marginRight”设置为“ auto”。

module Main exposing (main)

import Element as E
import Element.Border
import Html.Attributes


box : String -> E.Element msg
box label =
    E.paragraph
        [ E.width <| E.px 200
        , Element.Border.width 1
        , E.htmlAttribute (Html.Attributes.style "marginLeft" "auto")
        , E.htmlAttribute (Html.Attributes.style "marginRight" "auto")
        ]
        [ E.text label ]


row : E.Element msg
row =
    E.wrappedRow []
        [ box "A"
        , box "B"
        , box "C"
        ]


main =
    E.layout [] row