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:
Write a comment