How to justify content in div with complete example

How to justify content in div with complete example

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:

Related posts

Write a comment