InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
How will you align content inside the p tag at the exact center inside the div? |
|
Answer» We can add the text-align: center property inside the parent div for aligning the contents horizontally. But it will not align the contents vertically. We can align the CONTENT vertically by making the parent element have relative positioning and the child element have absolute positioning. The child element should have the values of top, bottom, RIGHT, left as 0 to center it in the middle vertically. Then we need to SET the margin as AUTO. It is assumed that both the child and mother ELEMENTS will have height and width values. Consider we have a div element of height and width taking 20% of the screen size, and we have a paragraph element taking the height of 1.2em and width of 20%. If we want to align the paragraph element at the center (vertically and horizontally), we write the following styles: div { position : relative; // Make position relative height : 20%; width : 20%; text-align : center; //Align to center horizontally}p { position : absolute; // Make position absolute top:0; // Give values of top, bottom,left, right to 0 bottom:0; left:0; right:0; margin : auto; // Set margin as auto height : 1.2 em; width : 20%;} |
|