0

Center Alignments in HTML/CSS

Center alignments in Web page might be tedious task for many. Here in this post I will share the cheat code to handle it. Also before beginning it have a look at the basics which are more important than anything.

"Elements" and "tags" are terms that are widely confused. HTML documents contain tags, but do not contain the elements. The elements are only generated after the parsing step, from these tags. - Wikipedia
  • Understanding CSS style position
    • fixed: Is for browser viewable area. Fixed postioning fixes the position of an element relative to the browser window. The element always stays fixed in place even when scrolling.
    • absolute: takes an element out of the document flow, meaning the browser acts as if the element has no width & height, and other elements of the page moves up as if it wasn’t there. The position of the element is then fixed relative to the top level container or the closest parent with set positioning.
    • relative: sets the position of an element relative to its original position. The element’s original width and height is retained in document flow and other elements behave as if it was in its original postion.
    • static: is the default behaviour of elements inherited positioning tells an element to inherit its positioning from its parent element.
  • For the following elements/tags the default value for “display” is “block“. That means block-level elements begin on new lines example if you have HTML like <p>hello</p><p>world</p> it will be rendered in two lines with “hello” in first line “world” in second line. Also the default behaviour can be changed by setting to inline or inline-block or flex and so on
    • p, h1, h2, h3, h4, h5, h6
    • ol, ul, pre, address, blockquote
    • dl, div, fieldset, form, hr, table, noscript
  • Similarly the following are the inline elements. Example <b>hello</b> <b>world</b> will be rendered in a single line
    • b, big, i, small, tt
    • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
    • a, bdo, br, img, map, object, q, script, span, sub, sup
    • button, input, label, select, textarea
  • Understanding on float
    • left: removes an element from normal document flow. It then takes that element and pushes it to the far left as possible. Other elements will move up as far as possible to the flow around the element and takes its original space.
  • Understanding on Box model is more important. While calculating the size you need to consider margin, border, padding and size of the element. Please have a look into box-sizing:border-box;

Please find the snippets at here for your reference.

Here is the HTML

<body>
    
<section class="container centerHorizontally">
        .centerHorizontally
    </section>


    
<section class="container centerVertically">
        .centerVertically
    </section>


    
<section class="container centerVertically alignRight">
        .centerVertically .alignRight
    </section>


    
<section class="container centerHorizontallyVertically">
        .centerHorizontallyVertically
    </section>


    
<section class="container centerHorizontallyBottom">
        .centerHorizontallyBottom
    </section>

</body>

Center Horizonally

    .centerHorizontally {
        margin: 0 auto;
    }

Center Vertically

    .centerVertically {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }

Center Horizontally & Vertically (Center of the page)

    .centerHorizontallyVertically {
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin: auto;
    }

Center Horizonally to the right of the page

    .centerVertically {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
    .alignRight {
        right: 0;
    }

Center Vertically to the bottom of the page

    .centerHorizontallyBottom {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 0);
    }

Text Alignment

text-align: center;

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.