خودتان امتحان کنید

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:350px;
height:100px;
border:1px solid black;
  
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
</style>
</head>
<body>

<div>
<p>Center me!</p>
</div>

<p><b>Note:</b> Flexible boxes are not supported in IE 9, and earlier versions.</p>

</body>
</html>
DOCTYPE html>
<html>
<head>
<style> 
div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:reverse;

/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;

/* W3C */
display:box;
box-direction:reverse;
}
</style>
</head>
<body>

<div>
<p>Cat</p>
<p>Dog</p>
<p>Horse</p>
</div>

<p><b>Note:</b> Flexible boxes are not supported in IE 9, and earlier versions.</p>

</body>
</html>

Report a Problem: