Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

WDS53 - Align Everything

In the last Article, we learned about inline-blocks in CSS which helps us to get the same effect as we get by using float and clear properties. Hope you have tried examples given in the previous article. In today's article, we are going to learn about align property in CSS so that you can align text wherever you want.
Let's begin...

Center Align Element

To horizontally center a block element:
If you set up the specified width, the element will take that much space and remaining space will be split equally between the two margins.

Center Align Text

To center the text inside any element:
text-align: center;

Center an Image

To center an image, change the image into a block element and set left and right margin to auto.
display: block;
margin-left: auto;
margin-right: auto;

Left or Right Align Element

  • Using Position
Let us see how to right align element...
position: absolute;
right: 0px;
  • Using Float
Let us see how to right align element...
float: right;

Vertically Center Element

  • Using padding
You can set padding fro element for top and bottom to vertically align it.
padding-top: 20px;
padding-bottom: 20px;
  • Using position
Let's say we have a div element and it has text element inside it. This is how we will center the text element:
div {
   position: relative;
text {
    position: absolute;
    transform: translate(-50%, -50%)'

Note: transform property does not work in Internet Explorer(😏), but that's OK...👍
That's all for today. In the next article, we will see how we can combine two elements in CSS to apply properties on them.
Till then #keepCoding.

This post first appeared on The Coding Express, please read the originial post: here

Share the post

WDS53 - Align Everything


Subscribe to The Coding Express

Get updates delivered right to your inbox!

Thank you for your subscription