w3resource

CSS Properties: How to align self sets to its default value?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- Declare character encoding -->
<title>How to align self sets to its default value</title><!-- Set the title of the HTML document -->
<style> /* CSS style start*/
#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 Safari */
-webkit-align-items: initial; /* Safari 7.0+ */ /* Set alignment of items to their default value for Safari */
display: flex; /* Use flexbox layout for other browsers */
align-items: initial; /* Set alignment of items to their default value for other browsers */
}
#xyz div {
-webkit-flex: 1; /* Safari 6.1+ */ /* Allow the divs to grow and shrink to fill the available space horizontally for Safari */
flex: 1; /* Allow the divs to grow and shrink to fill the available space horizontally for other browsers */
}
div#alignselfDiv {
align-self:center; /* Align this specific item vertically to the center */
}

</style>
</head>
<body>
<div id="xyz">
<div style="background-color:#99FF99;">Item1</div><!-- First div item -->
<div style="background-color:#33CCFF;" id="alignselfDiv">Item2 with more content.</div><!-- Second div item with alignment specified -->
<div style="background-color:#FF99FF;">Item3</div><!-- Third div item -->
</div>
</body>
</html>

Explanation:

  • The HTML document contains a flexible container (div#xyz) with three child div items.
  • The align-items property of the container and the child div items is set to "initial", which resets the alignment to its default value.
  • One of the child div items (div#alignselfDiv) has its alignment set to center using CSS, but this alignment setting is overridden by the container's alignment, causing it to align according to the default alignment value.

Live Demo:

See the Pen align-self-initial-answer by w3resource (@w3resource) on CodePen.


See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes No

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.