CSS Tutorial (Thirteenth Session) – Floating elements and vertical alignment

In this session, we introduce the   design of your site with the characteristics of floating elements and vertical alignment:

Align Vertical Feature

This property is used for vertical alignment of inline elements such as <span>, <img>, <a> and …. 
First, you need to know the difference between inline elements and block elements to define this property. 
Block elements are elements that precede and after each empty line, such as <hn>, <div>, <p> and 
… in HTML. 
Inline elements: linear elements of elements that precede and after the empty line There is no such thing as <, <a 
span> <img >> and … In HTML 
, as we said, the align vertical property is used for the alignment of inline elements; this property is one of three 
numeric values , percentages and keywords as a value Accepts.

key words:

Baseline: This is a linear value assuming that it is aligned with the lower part of the letters of a word or sentence. 
For example, the hypothetical line that the 7Learn word sits on. 
Middle: Alignment with the midpoint of the 
Sub line : Alignment above the line like numbers in mathematics; this value is equivalent to the <sub> tag in HTML. 
Super: Aligns with the bottom of the line and like the numbers in the mathematical index; this value is equivalent to the <sup> tag in HTML. 
top-text: aligns the text with the top of the uppercase letters. 
bottom-text: aligns the text with the shortest or lowercase letters, for example, g or y is placed under the 
baseline and the text is aligned with the lower part of the alphabet. 
Top: Align the top of the element with the highest element in the line. 
Bottom: Aligns the bottom of the element with the shortest element in the line.
Using percentage and numeric values depends on the height-line property defined for the element you want. 
Example: Using% 50: align-vertical aligns the text in the middle of the line. 
Example :

P {
 Line-height: 10px;
 Vertical-align: 5px;

In the example above, the height-line is 10 pixels, and since the align-vertical is 5 pixels and half is high-line, the 
text is aligned in the middle of the line. 
The align-vertical property is particularly useful for aligning images. 
Example :

  CSS Tutorial (Ninth Session) – Spaces around the element

Html code:

 <span class = "top"> top </ span>
 <span class = "middle"> Middle </ span> 7Learn
 <span class = "bottom"> bottom </ span> 7Learn
 </ h1>

And css code:

H1 span {font-size: 10px; }
 . top {vertical-align: top; }
 . bottom {vertical-align: bottom; }
 . middle {vertical-align: middle; }

Well, here 
we are familiar with floating elements and the way to remove the floating elements after them, and the vertical alignment. In the next chapter, we will work with the lists of ul and ol and their elements, the tag li.

Development of Espinas always tried to use the most up to date Tktynk and tools in the  design of the site is in Espinas technologies in the world such as CSS3 , HTML5 , Jquery ,JAVASCRIPT   in web design can be used as well as languages such as PHP, ASP in the enterprise Spinal Cluster is the first letter

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top