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.
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;
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:
2) Inline-* elements
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:
[contact-form-7 id=”69″ title=”Contact form 1″]