How to center a div, p or other html elements

by · Published · Updated



We usually center a TEXT by using text-align css property. But it may be essential that you pull a div, paragraph, table or other elements by the ear and put it in the center of a container For this, you need to apply CSS tricks.

We can do this in a few ways-

  • By using text-align style
  • By margin: auto style
  • By position: absolute style

Now, let’s go in detail. Noted, to keep things lucid, we’ve used inline CSS in each field-

Center HTML elements by text-align property

How to center a div or paragraph (p) element

Center a DIV (div)

text-align is used to align a text on left, right, center or to justify. You can also use this property to align a div or p element as well.

Suppose you have div 1 with CSS as shown below-

<div style="
width:120px; 
height: 100px; 
background:gold;"> 
DIV 1 
</div>

This div, with all its components, will get aligned on left by default. See result-

DIV 1

But contextually, you like to align the div 1 itself to the center with all the styling. For this just use another div as wrapper or container. In this case our wrapper is div 2 that encircles div 1

And now, just do the following-

  • use text-align: center; with parent div 2
  • use display:inline-block with child div 1

Just look!

<div style="text-align:center;
border: 4px groove black;">
<div style="width:120px; 
height: 100px; 
background:gold;
display:inline-block;"> DIV 1 
</div>
</div>

This will surely result in-

DIV 1

Now see gladly how similar coding on p, and li produce the same result-

Center a Paragraph (p) element

Code

<div style="text-align:center;
border: 4px groove black;">
<p style="width:120px; 
height: 100px; 
background:#c6ecd9;
display:inline-block;
border-radius:10px;"> paragraph 
</p>
</div>

Result

paragraph

Center a List (li) element

Code

<div style="text-align:center;
border: 4px groove black;">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>

Result

  • Item 1
  • Item 2
  • Item 3

Center a div by margin property

Yes, you can easily centralize an html element by using margin property. In this case, you needn’t use parent DIV. Just-

  • use margin:auto to the desired DIV you like to put in center.
  • You must use width property with value as you wish. Browser will distribute the width equally as left and right margin to centralize the div.
  • You can also set margin-left:auto and margin-right:auto.

See code

<div style="height: 100px;
width:120px; 
margin:0 auto; 
background:gold;
border-radius:10px;"> 
DIV 1 
</div>

Here’s the result

DIV centered by margin property

Center a div by position property

Hope you know, POSITION property is used to fix placement of an html element relative to the container or viewport. You can use it effectively to get a div centered. For our example, we’ll use a parent container div 1 and a child div 2. No hassle, just-
  • set width and height of div 1.
  • also set width and height of div 2
  • set position: absolute in div 2.
  • In div 2, set left: value. This value should be equal to half of (div 1 width – div2 width).

Just look-

Code

<div style="border: 4px groove gray; 
width:200px;
height:200px;">
<div style="position: absolute; 
left:50px;
width: 100px; 
height: 150px; 
border: 4px groove gray;
text-align:center;"> 
DIV 2 centered by position property
</div>
</div>

Result

DIV 2 centered by position property

OK friends, hope you enjoyed!!

Leave a Reply

Your email address will not be published.