CSS Align

Home / CSS / CSS Align

CSS Align

CSS-Align:

In CSS, the align property itself doesn't exist. However, there are various properties and values related to alignment that you can use to control the alignment of elements within a web page. These properties include:

text-align: This property is used to horizontally align text content within an element. It can take values like "left," "right," "center," or "justify."

 
<style>
    p {
      text-align: center;
    }
  </style>

vertical-align: This property is used to vertically align inline or inline-block elements within their containing element. It can take values like "top," "middle," "bottom," "text-top," and more.

<style>
    img {
      vertical-align: middle;
    }
  </style>

justify-content: This property is used in flexbox layouts to align flex container items along the main axis. It can take values like "flex-start," "flex-end," "center," "space-between," and "space-around."

<style>
    .flex-container {
      display: flex;
      justify-content: center;
    }
  </style>

align-items: Also used in flexbox layouts, this property aligns flex container items along the cross axis. It can take values like "flex-start," "flex-end," "center," "stretch," and more.


<style>
    .flex-container {
      display: flex;
      align-items: center;
    }
  </style>

align-self: This property allows you to individually control the alignment of specific flex items within a flex container.

 
<style>
    .flex-item {
      align-self: flex-start;
    }
  </style>

align-content: Used in multi-line flexbox layouts, this property aligns flex lines within a flex container. It can take values like "flex-start," "flex-end," "center," "space-between," and "space-around."


<style>
    .flex-container {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
  </style>

line-height: This property is used to control the vertical alignment of text within an element. By setting it to the same value as the element's height, you can vertically center the text.

 <style>
    .box {
      height: 100px;
      line-height: 100px;
    }
  </style>