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:
margin:auto;
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.
Comments
Post a Comment