CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



CSS Align

CSS Align is a property that allows you to align elements in different ways. It is used to position elements on a web page, and it can be used to align text, images, and other elements. The CSS Align property is a powerful tool that can help you create a professional-looking website.

Types of CSS Align

There are several types of CSS Align that you can use to position elements on a web page. These include:

  • text-align: This property is used to align text within an element. You can use it to align text to the left, right, center, or justify it.
  • vertical-align: This property is used to align elements vertically within a container. You can use it to align images, text, and other elements.
  • float: This property is used to position elements next to each other. You can use it to create columns or to position images next to text.
  • position: This property is used to position elements on a web page. You can use it to position elements relative to the viewport or to other elements.

Examples of CSS Align

Here are some examples of how you can use CSS Align to position elements on a web page:

text-align

You can use the text-align property to align text within an element. For example, you can use the following code to align text to the center:

  <p style="text-align: center;">This text is centered.</p>

This will center the text within the <p> element.

vertical-align

You can use the vertical-align property to align elements vertically within a container. For example, you can use the following code to align an image to the middle of a container:

  <img src="image.jpg" style="vertical-align: middle;">

This will align the image to the middle of the container.

float

You can use the float property to position elements next to each other. For example, you can use the following code to create two columns:

  <div style="float: left; width: 50%;">Column 1</div>
<div style="float: left; width: 50%;">Column 2</div>

This will create two columns, each taking up 50% of the width of the container.

position

You can use the position property to position elements on a web page. For example, you can use the following code to position an element at the top right corner of a container:

  <div style="position: absolute; top: 0; right: 0;">Top right corner</div>

This will position the element at the top right corner of the container.

Conclusion

CSS Align is a powerful tool that can help you position elements on a web page. By using the different types of CSS Align, you can create a professional-looking website that is easy to navigate and visually appealing.

References

Activity