طراحی نوار وضعیت حبابی(قسمت ششم)

در این قسمت از مقاله ی طراحی نوار وضعیت حبابی، قصد داریم آنچه تاکنون طراحی کرده ایم را در وسط صفحه ی نمایش قرار دهیم. برای انجام این کار، گام های زیر را دنبال کنید: 

گام شماره 1: 

برای وسط چین کردن آنچه که تاکنون طراحی کرده ایم، باید به کلاس green. استایل دهی کنیم، زیرا دایره ی سبز رنگ ما در داخل عنصر با کلاس green. قرار دارد. ابتدا قصد داریم از آنچه که در چهار مقاله ی اول آموختیم استفاده کنیم و به وسیله ی آنها دایره ی سبز رنگ را در داخل div با کلاس green. از لحاظ عمودی و افقی وسط چین کنیم. بنابراین ابتدا دستورات زیر را در داخل کلاس green. می نویسیم: 

.green {
 display: flex;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: -moz-box;
 display: -webkit-box;
}

 تمامی دستورات بالا، درواقع یک دستور بیشتر نیستند. همه ی آنها معادل با دستور display:flex هستند، اما برای مرورگرهای متفاوت نوشته شده اند تا بتوان از قابلیت ظرف های انعطاف پذیر در آن مرورگرها نیز استفاده نمود. پس با استفاده از دستورات بالا، تعیین می کنیم که عنصر div که از کلاس green. استفاده می کند، یک ظرف انعطاف پذیر در نظر گرفته شود. (قبلا با مفهوم ظرف انعطاف پذیر آشنا شدید). 

گام شماره 2:

 حالا به کلاس green. کدهای قرمز رنگ  زیر را اضافه می کنیم: 

.green {
 display: flex;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: -moz-box;
 display: -webkit-box;
 
 width: 100%;
 height: 350px;
 border:1px solid red;

}

 با استفاده از کدهای قرمز رنگ بالا، ابتدا مقدار width از عنصر با کلاس green. را برابر با 100% قرار می دهیم. این کار باعث می شود که عرض عنصر div با کلاس green. به اندازه ی عرض عنصر والد خود، یعنی عنصر body در بیاید. 

حالا مقدار خصوصیت height (ارتفاع) برای این عنصر را برابر با مقدار 350 پیکسل قرار می دهیم. که می تواند به دلخواه شما بیشتر یا کمی کمتر نیز باشد. 

سپس برای اینکه بتوانیم تغییرات اعمال شده را مشاهده کنیم، با استفاده از ویژگی border، یک کادر به رنگ قرمز به دور عنصر div با کلاس green. ترسیم می کنیم. 

 گام شماره 3: 

 حالا برای اینکه مشخص کنیم که آیتم درون عنصر با کلاس green. ار لحاظ افقی و عمودی، در وسط قرار گیرد، دستورات آبی و نارنجی رنگ زیر را به کلاس green. اضافه می کنیم: 

.green {
 display: flex;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: -moz-box;
 display: -webkit-box;
 
 width: 100%;
 height: 350px;
 border:1px solid red;
 
 -webkit-justify-content: center;
 justify-content: center;
 
 -webkit-align-items: center;
 align-items: center;
 
}

 در کدهای بالا، دستورات آبی رنگ هردو یکی هستند، و تنها برای کار کردن در مرورگرهای مختلف این طور نوشته شده اند. همان طور که در مقالات ابتدایی این آموزش مطالعه کردید، دستور justify-content: center باعث می شود تا آیتم ما در داخل عنصر والد خود، به صورت افقی در وسط قرار گیرد. 

کدهای نشان داده شده به رنگ نارنجی نیز هر دو یکی هستند. همان طور که قبلا مطالعه نمودید، دستور align-items: center باعث می شود که آیتم ما در داخل عنصر والد خود، به صورت عمودی وسط چین شود. 

مشاهده ی نتیجه:

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

See the Pen 1.2.1نوار وضعیت حبابی by Ehsan Abbasi (@sbaloot) on CodePen.

 برای مشاهده ی این نتیجه به صورت تمام صفحه، اینجا کلیک کنید. 

• قبلی
• بعدی