Last Update - 24 Dec 2018

How to justify content in div

How to justify content in div

You can justify the content of your page or content within the layout. The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). The numbers in the table specify the first browser version that fully supports the property.


-webkit-justify-content: center; /* Safari 6.1+ */
justify-content: center;


You can see the full example for the justify-content In Div:

<!DOCTYPE html>
#main div {
  width: 100px;
  height: 100px;

#main {
  width: 100%;
  border: 2px solid #f2f2f2;
  display: -webkit-flex; /* Safari */
  -webkit-justify-content: center; /* Safari 6.1+ */
  display: flex;
  justify-content: center;

<h1>The justify-content In Div</h1>

<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>

<div id="main">
  <div style="background-color:red;">Rd</div>
  <div style="background-color:lightblue;">Lightblue</div>
  <div style="background-color:green;">Green</div>
  <div style="background-color:yellow;">Yellow</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the justify-content property.</p>
<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-justify-content property.</p>



Must Read These:

Did you find this page helpful? X