جلسه ی چهلم: وسط چین کردن عناصر در CSS

وسط چین کردن عناصر در CSS

در جلسه ی گذشته در مورد خصوصیت text-transform صحبت نموده ایم. (برای دیدن آموزش خوصیت Text-transform در CSS کلیک کنید) در این جلسه میخواهیم به چگونگی وسط چین کردن عناصر در CSS بپردازیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

 

وسط چین کردن عناصر در CSS

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

 

وسط چین کردن عناصر در CSS از لحاظ افقی

برای اینکه بخواهیم یک عنصر را از لحاظ افقی وسط چسن کنیم باید ابتدا نوع عنصر را بشناسیم. در صورتی که عنصر ما از عناصر inline باشد از خوصیت Text-align استفاده می کنیم. برای آشنایی با عناصر inline و Block به آموزش خاصیت Display در CSS مراجعه نمایید. برای فهم این متن به مثال زیر توجه کنید:

کد HTML:

<body>

این متن در وسط صفحه قرار دارد.

</body>

کد CSS:

body {

background-color: #fff;

text-align: center;

}

خروجی کد بالا:

وسط چین کردن عناصر در CSS

 

متن بالا در صورتی بود که عنصر ما inline باشد اما در صورتی که عنصر ما از نوع عناصر Block باشد از طریق خصوصیت Margin آن را وسط چین می کنیم. به نمونه کد زیر توجه کنید:

کد HTML:

<div class="kamyabiha">

<p>این متن در وسط صفحه قرار دارد.</p>

</div>

کد CSS:

.kamyabiha {

background-color: #000;

width: 250px;

text-align: center;

color: #fff;

margin: 0 auto;

padding: 5px

}

خروجی کد بالا:

وسط چین کردن عناصر در CSS

 

در نمونه کد بالا می بینید که برای وسط چین کردن عناصر هم از خصوصیت های Text-align و Margin استفاده شده است. شاید از خود بپرسید چرا باید بگوییم که از خصوصیت Text-align برای وسط چین نمودن متن درون کلاس استفاده کردیم ولی برای وسط چین کردن باکس مشکی رنگ خود باید از ویژگی Margin استفاده کنیم زیرا عنصر کلاس یک عنصر بلاک است و به راحتی در وسط صفحه قرار نمی گیرد.

حال ممکن است از دو روش بالا برای وسط چین نمودن عناصر استفاده کنیم و نتیجه ای حاصل نشود. برای مثال در عناصری مانند تگ های Span که به راحتی به جهت خاصی حرکت نمی کنند و ممکن است با آن ها دچار مشکل شویم. راحتترین راهکار در مواجه با این گونه مشکلات این است که از خصوصیت Display:block یا از خصوصیت Display:Table استفاده کنیم.

 

وسط چین کردن عناصر در CSS از لحاظ عمودی

شاید در مواردی ما نیاز داشته باشیم که عناصر موجود در وب سایت خود را از لحاظ عمودی وسط چین نماییم. اولین راهکار در مواجه با این مسئله استفاده از Padding یا margin می باشد. شاید مشکل شما با یک padding چند پیکسلی حل شده و نیازی به راهکار های سنگین تر نباشد. به مثال زیر توجه کنید:

کد HTML:

<div class="box">

<img src="image/img.jpg" alt="#">

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
 چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است...</p>

</div>

کد CSS:

body {

background-color: #fff;

}

.box {

width: 400px;

height: 500px;

box-shadow: 1px 1px 30px rgba(0,0,0,.3);

margin: 15px auto;

text-align: center;

border-radius: 10px

}

.box img {

max-width: 380px;

max-height:480px;

margin: 10px 0px

}

.box p {

font-size: 22px;

color: #424242;

font-weight: bold;

margin: 70px 7px 0px 10px

}

خروجی کد بالا:

وسط چین کردن عناصر در CSS

همانطور که در مثال بالا مشاهده می کنید متن داخل باکس به وسلیه ی خصوصیت Margin از لحاظ عمودی وسط چین شده است. (همیشه لازم نیست کارمون رو سخت رو استفاده کنیم  :))

 

راه حل بعدی برای حل این مشکل استفاده از خصوصیت فلکس باکس می باشد. شاید بعضی از شما با این مفهوم آشنا نباشید به همین دلیل ما برای شما یک کلید درست کرده ایم. در صورتی که می خواهید عناصر درون باکس های شما از لحاظ عمودی وسط چین باشند کافیست که از نمونه کد زیر استفاده کنید. (توجه داشته باشید که بخش اول کلید این کد می باشد). کلید کد:

display: flex;

flex-direction: column;

justify-content: center;

حال به مثال زیر توجه کنید:

کد HTML:

<div class="box">

<img src="image/img.jpg" alt="#">

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
 چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است...</p>

</div>

کد CSS:

.box {

width: 400px;

height: 500px;

box-shadow: 1px 1px 30px rgba(0,0,0,.3);

margin: 15px auto;

text-align: center;

border-radius: 10px;

display: flex;

flex-direction: column;

justify-content: center;

padding: 5px

}

.box img {

max-width: 380px;

max-height:480px;

margin: 0 auto;

}

.box p {

font-size: 22px;

color: #424242;

font-weight: bold;

}

خروجی کد بالا:

وسط چین کردن عناصر در CSS

 

روش بالا زمانی استفاده می شود که ارتفاع ما ثابت باشد در صورتی که ارتفاع ما متغییر باشد از از نمونه کد زیر استفاده میکنیم. (توجه داشته باشید که بخش اول کلید این کد می باشد). کلید کد:

display: flex;

flex-direction: column;

justify-content: center;

resize: vertical;

overflow: auto;

کد HTML:

<div class="box">

<img src="image/img.jpg" alt="#">

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است...</p>

</div>

کد CSS:

.box {

width: 400px;

height: 500px;

box-shadow: 1px 1px 30px rgba(0,0,0,.3);

margin: 15px auto;

text-align: center;

border-radius: 10px;

display: flex;

flex-direction: column;

justify-content: center;

resize: vertical;

overflow: auto;

}

.box img {

max-width: 380px;

max-height:480px;

margin: 0 auto;

}

.box p {

font-size: 22px;

color: #424242;

font-weight: bold;

}

خروجی کد بالا:

وسط چین کردن عناصر در CSS

 

مبحث تکمیلی

ممکن است بعضی از طراحان برای قرار دادن عناصر به صورتی عمودی در وسط صفحه از خصوصیت line-height استفاده کنند. یادتان باشد که این راه حل دائمی نیست و فقط برای عناصری می باشد که یک خط باشند نه بیشتر زیرا کار این خصوصیت تعیین فاصله ی بین خطوط است. (عموما از این خصوصیت استفاده نکنید کار افراد عقب مونده اس :))

 

خلاصه مطلب

  1. در صورتی که عنصر ما از عناصر inline باشد از خوصیت Text-align استفاده می کنیم.
  2. در صورتی که عنصر ما از نوع عناصر Block باشد از طریق خصوصیت Margin آن را وسط چین می کنیم.
  3. برای وسط چین نمودن عناصر از لحاظ عمودی کافیست از خصوصیت فلکس باکس وکلیدی که ما برای شما درست کرده ایم استفاده کنید.

 

ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها