22 February 2024

In this layout structure, the parent element is set to display as inline-block, creating a container that adapts to the size of its content. Similarly, the content within the parent element is styled as inline-block, allowing it to flow horizontally within the parent container. By utilizing the CSS property vertical-align with the value of middle applied to the inline-block content, the content is effectively centered vertically within the parent container. This arrangement ensures a visually pleasing alignment, making it ideal for scenarios where both the parent and its content need to be horizontally and vertically centered while maintaining their inline-block display behavior.

Source code viewer
  1. .parent {
  2.   display: inline-block;
  3.   height: 200px; /* Set a height for the parent container */
  4.   line-height: 200px; /* Set line height equal to the height for vertical centering */
  5.   border: 1px solid #000; /* Optional: Add a border to visualize the parent */
  6. }
  7.  
  8. .inline-block {
  9.   display: inline-block;
  10.   vertical-align: middle; /* Align the inline block vertically */
  11. }
Programming Language: CSS