CSS align Element Horizontally center

CSS align elements horizontally center

CSS align elements horizontally center

Let’s understand what we are trying to do here. We want to center an element horizontally within the parent element so that we would have an element placed at an equal distance from either sides.

CSS ALIGN HORIZONTALLY

There are two different ways we can align an element. The option depends on the display property of the element you are trying to place.

  • Center the element by using its own CSS – display:block;
  • Center the element by using parent element’s CSS – display:inline*
    *display:inline, display:inline-block; display-inline-flex;

1) Blocks

css block element
css block element

Elements with “display:block” property are blocks. When no width is specified, blocks occupy the entire width of the parent. In such case, there is no need to center these elements. When the width is specified, blocks would left align, by default.  You can center them by setting the left and right margins left to auto, respectively. In this case, you are adding style to the element and not the parent container. See the example below:

 


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

2) Inline-* elements

css inline element
css inline element

Elements with”display:inline”, “display:inline-block”, and “display:inline-flex”,  property are the inline elements. Since, you have multiple inline elements within the same row, the horizontal centering has to be done from the parent container and not by the element itself. This is done by adding style “text-align:center” to the parent container. See the example below:


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

[contact-form-7 id=”69″ title=”Contact form 1″]

2 thoughts on “CSS align elements horizontally center”

  1. Hi, I always run into problem of aligning a div in center.
    How can we align center a div without parent containers text-align: center style.

    1. Hi Ethan, In terms of bowser compatibility, what is the oldest browser you have to support? There might be multiple solutions on that. Do you need to align vertically and horizontally middle?

Leave a Reply

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

mycap *