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>
<html>
<head>
<style> 
#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;
}
</style>
</head>
<body>

<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>
</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>

</body>
</html>

 

Must Read These:

Did you find this page helpful? X