DEV Community

Kristian Pedersen
Kristian Pedersen

Posted on • Updated 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

lukeocodes profile image

I Love Working Remotely, Even Though It Sucks at Times

@lukeocodes 🕹👨‍💻 -

developersdev_ profile image

Getting Started with React JS Development in 2024

Kuldeep Kundal -

sasafg34 profile image

"Unlocking the Future of Cryptocurrency Trading: A Deep Dive into Lords Exchange"

samuti34 -

scdcompany profile image

2024 Guide To Custom Software Development Cost Estimation

SCD Company | Custom Software -