HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #parent{ display:flex; align-items: flex-start; -webkit-align-items: flex-start; height:200px; border:1px solid #000; } #parent > div{ border:1px solid #267326; padding:10px 0; margin:10px; width: 90px; -webkit-flex: 1; /* Safari 6.1+ */ flex: 1; } </style> </head> <body> <h1>CSS align-self Property</h1> <div id="parent"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("parent").firstElementChild; function myFunction(){ x.style.alignSelf = "center"; x.style.WebkitAlignSelf= "center"; } </script> <p><strong>Note</strong>: Click on the button to align the first child element to center.</p> </body> </html>
OUTPUT
×

Save as Private