آموزش CSS (جلسه سیزدهم) – شناور ساختن عناصر و تراز عمودی

در این جلسه  طراحی سایت شما را با  خصوصیت های شناور ساختن عناصر و تراز عمودی آشنا می کنیم:

خصوصیت Align Vertical

این خاصیت به منظور تراز عمودی عناصر inline مثل <span> , <img> , <a> و … استفاده می شود…
خب اول باید فرق عناصر inline و عناصر block را بدانید تا تعریف این خاصیت قابل فھم شود.
عناصر block : عناصری ھستند که قبل و بعد از آنھایک خط خالی وجود دارد؛ مانند <hn> , <div> , <p> و
… در HTML
عناصر inline (خطی) : عناصر خطی عناصری ھستند که قبل و بعد از انھا خط خالی وجود ندارد؛ مانند <, <a
span> <img>> و… در HTML
و ھمان طور که گفتیم خاصیت align vertical برای تراز عناصر inline استفاده می شود؛ این خاصیت یکی از سه مقدار
عددی، درصدی و کلمات کلیدی را به عنوان مقدار می پذیرد.

کلمات کلیدی:

Baseline : این مقدار خطی است فرضی که ھم تراز با قسمت پایینی حروف یک کلمه یا جمله می باشد.
مثلا خط فرضی که کلمه ۷Learn رو آن می نشیند.
Middle : تراز با میانه ی خط
Sub : تراز بالای خط مثل اعداد توان در ریاضی؛ این مقدار معادل تگ <sub> در HTML است.
Super : تراز با پایین خط و مثل اعداد اندیس در ریاضی ؛ این مقدار معادل تگ <sup> در HTML است.
top-Text : متن را با بالای بلندترین حروف اطراف تراز می کند.
bottom-Text : متن را با کوتاه ترین یا پایین ترین حروف تراز می کند، برای مثال g یا y زیر خط اصلی
(baseline) قرار می گیرند و متن با پایین ترین قسمت این حروف تراز می شود.
Top : قسمت بالای عنصر را بلند ترین عنصر موجود در خط تراز می کند.
Bottom : قسمت پایین عنصر را با کوتاه ترین عنصر موجود در خط تراز می کند.
استفاده از مقادیر درصدی و عددی بستگی به خاصیت height-line تعریف شده برای عنصر مورد نظر دارد.
مثال : استفاده از %۵۰ :align-vertical متن را در وسط خط تراز می کند.
مثال :

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

در مثال فوق height-line برابر ۱۰ پیکسل و از آنجاییکه align-vertical برابر ۵ پیکسل و نصف مقدار height-line می باشد،
متن در وسط خط تراز می شود.
خاصیت align-vertical به طور خاص برای تراز بندی تصاویر مفید است.
مثال :

کد html :

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

و کد css :

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

بسیار خب تا اینجا با شناور ساختن عناصر و طریقه از بین بردن شناور بودن عناصر بعد از آن ھا، و تراز عمودی آشنا
شدیم، در فصل بعدی به کار با لیست ھای ul و ol و عناصر آن ھا یعنی تگ li می پردازیم

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند