CSS Properties: How to center the alignments for one of the items inside a flexible element?

Last update on February 15 2024 10:04:58 (UTC/GMT +8 hours)

Solution:

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 center the alignments for one of the items inside a flexible element</title><!-- Title of the HTML page -->
<style>/*Start of CSS styling */
#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: initial; /* Safari 7.0+ */ /* Set alignment of items to its default value for WebKit browsers */
display: flex; /* Use flexbox layout for other browsers */
align-items: initial; /* Set alignment of items to its default value for other browsers */
}

#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 */
}

#alignselfDiv { /* CSS rule for element with id "alignselfDiv" */
-webkit-align-self: center; /* Safari 7.0+ */ /* Align this specific item vertically to the center for WebKit browsers */
align-self: center; /* Align this specific item vertically to the center 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;" id="alignselfDiv">Item2 with more content.</div><!-- Second nested div with background color and longer text, aligned to the center -->
<div style="background-color:#FF99FF;">Item3</div><!-- Third nested div with background color -->
</div><!-- End of div with id "xyz" -->

</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

The HTML code creates a container div with the ID "xyz" and three nested divs.
Each nested div has a different background color and content.
CSS is used to style the container div and its child divs, including setting width, height, border, and flexbox properties.
Flexbox properties are applied to align the child divs based on their default alignment using the align-items: initial; property.
Additionally, the div with the ID "alignselfDiv" is aligned to the center vertically using the align-self: center; property, overriding the default alignment.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page