Scanner class Methods in Java

on
0

CSS vertical-align Property

on

The vertical-align Property

We discussed horizontal alignment of text previously. Now , we'll learn how to align text vertically using CSS.
The vertical-align property is used to set the alignment of text vertically.It can align text on top, bottom or middle.

Values it takes:- 

vertical-align can take many values but it has main three values. That are as follows:- 

  1. Top:-   It aligns the text on top of the webpage.
  2. Middle:-   It aligns the text on center of the webpage.
  3. Bottom:-   It aligns the text on bottom of the webpage.

Lets see an example of this with the help oh HTML table, We will set the alignment of text in the table.

HTML CODE:
<body>
<table border="1" cell padding="2" cellspacing="0" style="height:150px;">
<tr>
 <td class="top">Top</td>
<td class="middle">Middle</td>
<td class="bottom">Bottom</td>
</tr>
</table>
</body>
CSS CODE:
td.top{
       vertical-align: top;
}
td.middle{
      vertical-align: middle;
}
td.bottom{
       vertical-align: bottom;
}
Result:

vertical-align property example using html and css

Other Values :- 

The vertical-align property also takes the other values which aligns the text vertically but according to user's desire.
These values are as follows:-
  • baseline:-  written as baseline.
  • subscript:-  written as sub.
  • superscript:-  written as super.
  • pixel:-  give value in px like 10px.
  • points:- give value in pt like 2pt.
  • centimeter:- give value in cm like 5cm.
  • percentage:- give value in %  like 50%..
The example below shows the difference between them:

HTML CODE:
<body>
<p >This is an <span class="baseline"> baseline </span> text.</p>
<p > This is an<span class="sub">   sub </span> line text.</p>
<p >This is an <span class="super"> super </span> line text.</p>
<p > This is a <span class="pixel"> pixel </span> example.</p>
<p > This is a <span class="points"> points </span> example.</p>
<p > This is a <span class="centimeter"> centimeter </span> example.</p>
<p> This is a  <span class="percentage"> percentage</span> example.</p>
</body>

 CSS CODE:
span.baseline{
         vertical-align: baseline;
}
span.sub{
        vertical-align: sub;
}
span.super{
       vertical-align: super;
}
span.pixel{
        vertical-align: 10px;
}
span.points{
       vertical-align: 1cm;
}
span.centimeter{
       vertical-align: 10pt;
}
span.percentage{
       vertical-align: 50%;
}

Result:


vertical-align property example using html and css


In the above example the <span> is used to highlight the text , to see the difference between normal line and highlighted text.

Negative Values

We can also use negative values to vertical align .If you give negative values then text will move downwards.

Example: Write values as below in the CSS file, and spot the difference.

CSS CODE:-
span.baseline{
        vertical-align: baseline;
}
span.sub{
        vertical-align: sub;
}
span.super{
        vertical-align: super;
} 
span.pixel{
        vertical-align: -10px;
}
span.points{
        vertical-align: -1cm;
}
span.centimeter{
        vertical-align: -10pt;
}
span.percentage{
        vertical-align: -50%;
}

Try it Yourself!Happy Coding!

Comments

Post a Comment

If you have any doubt, ask here