HTML Code:
<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Specify character encoding -->
<title>How to align item with JavaScript</title><!-- Title of the HTML page -->
<style>/* Start of CSS styling */
div#xyz { /* CSS rule for element with id "xyz" */
width: 200px; /* Set width of the container */
height: 250px; /* Set height of the container */
border: 1px solid black; /* Set border of the container */
display: -webkit-flex; /* Safari */ /* Use flexbox layout for WebKit browsers */
-webkit-align-items: center; /* Safari 7.0+ */ /* Align items vertically at the center for WebKit browsers */
display: flex; /* Use flexbox layout for other browsers */
align-items: center; /* Align items vertically at the center for other browsers */
}
div#xyz div { /* CSS rule for divs nested under element with id "xyz" */
-webkit-flex: 1; /* Safari 6.1+ */ /* Allow the divs to grow and shrink to fill the available space horizontally for WebKit browsers */
flex: 1; /* Allow the divs to grow and shrink to fill the available space horizontally for other browsers */
}
</style><!-- End of CSS styling -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<div id="xyz"><!-- Start of div with id "xyz" -->
<div style="background-color:#99FF99;">Item1</div><!-- First nested div with background color -->
<div style="background-color:#33CCFF;">Item2 with more content.</div><!-- Second nested div with background color and longer text -->
<div style="background-color:#FF99FF;">Item3</div><!-- Third nested div with background color -->
</div><!-- End of div with id "xyz" -->
<p>Click the "Try it" button to set the value of the alignItems property to "flex-start"</p><!-- Instruction for user -->
<button onclick="w3r()">Try it</button><!-- Button to trigger JavaScript function -->
<script><!-- Start of JavaScript code -->
function w3r() { /* Define JavaScript function named "w3r" */
document.getElementById("xyz").style.WebkitAlignItems = "flex-start"; // Code for Safari 7.0+ /* Set align-items property to "flex-start" for WebKit browsers */
document.getElementById("xyz").style.alignItems = "flex-start"; /* Set align-items property to "flex-start" for other browsers */
}
</script><!-- End of JavaScript code -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->
Explanation:
Live Demo:
See the Pen align-item-javascript-syntax-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4