This is day 7 of my 30 day Elm challenge

I want to relax today, so I'll just try using elm-ui to center some divs and their content.

Simple code/demo: https://ellie-app.com/bSP34Xptzbza1

Also simple code/demo: https://ellie-app.com/bSNRPYHz6nna1

Today's project uses these packages:

mdgriffith/elm-ui
phollyer/elm-ui-colors (because I like HTML color names)

I highly recommend watching "Building a Toolkit for Design" by Matthew Griffith

Background

I remember trying to figure out how to center a div and its content as a beginner.

Still, the top result for me is from W3Schools, which includes things like both absolute and relative positioning, and translating by -50%.

Flexbox improved things a lot, but I still wished there was something simpler.

I don't do much CSS, so I still get tripped up by aligning, justifying, flex-this, flex-that.

Anyway, here's how I would center a div and its contents using regular CSS.

<html>

<head>
    <style>
        body {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        div {
            background-color: lime;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div>
        <p>I am centered!</p>
    </div>
</body>

</html>

Here's how to do it with elm-ui. Man, that's nice:

module Main exposing (..)

import Colors.Opaque exposing (lime)
import Element exposing (..)
import Element.Background as Background


centeredDiv =
    column
        [ Background.color lime
        , width (px 200)
        , height (px 200)
        , centerX
        , centerY
        ]
        [ el [ centerX, centerY ] (text "I am centered")
        ]


main =
    layout [] centeredDiv

Here's today's code - two rectangles and a square saying hi to you!

That's it. See you tomorrow!

module Main exposing (..)

import Colors.Opaque exposing (beige, lightblue, salmon)
import Element exposing (..)
import Element.Background as Background
import Element.Border as Border
import Html exposing (Html)


main : Html.Html msg
main =
    fullscreenContainer
        [ centeredDiv 200 40 lightblue
        , centeredDiv 40 200 beige
        , centeredDiv 100 100 salmon
        ]


fullscreenContainer : List (Element msg) -> Html msg
fullscreenContainer stuff =
    layout [] <|
        column [ width fill, height fill, spacing 15 ] stuff


centeredDiv : Int -> Int -> Color -> Element msg
centeredDiv divWidth divHeight backgroundColor =
    row
        [ Background.color backgroundColor
        , Border.width 2
        , centerX
        , centerY
        , width (px divWidth)
        , height (px divHeight)
        ]
        [ el [ centerX, centerY ] (text "Hi!") ]

Blog

#30daysofelm Day 7: Centered div and content

Kristian Pedersen

Background

Join Our Newsletter. No Spam, Only the good stuff.

Related