DEV Community

Kristian Pedersen
Kristian Pedersen

Posted on • Edited on

#30daysofelm Day 7: Centered div and content

#elm

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

Screenshot showing centered green div

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

Screenshot showing three centered divs

Today's project uses these packages:

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!") ]
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
kristianpedersen profile image
Kristian Pedersen • • Edited

I just learned you can do this:

<div id="container">
  <div>I am centered horizontally and vertically</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
#container {
  height: 100vh;
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

I'm sure modern CSS is pretty good once you get into it.

Read next

_cds_ profile image

Not everything is a Mock, let's explore Test Doubles

Cesare De Sanctis -

somuya_khandelwal profile image

DAY 28 Graphs Reloaded: Cloning and Evaluating Connections

Somuya Khandelwal -

somuya_khandelwal profile image

DAY 27 Navigating Graphs: From Islands to Regions

Somuya Khandelwal -

somuya_khandelwal profile image

DAY 26 Exploring Binary Search Trees with Precision

Somuya Khandelwal -