وسط‌چین کردن عنصرهای HTML با کمک چند شیوه‌ی نسبتا پیچیده امکان‌پذیر است. در این نوشته به یکی از این روش‌ها که با کمک pseudo element ها انجام می‌شود می‌پردازیم.

نکته‌ی ابتدایی برای وسط‌چین کردن عمودی عنصرها، مشخص بودن ارتفاع عنصر پدر است. به این معنی که اگر ارتفاع عنصر پدر نامعلوم باشد، وسط‌چین کردن فرزندها از نظر منطقی غیرممکن است.

برای انجام این کار یک عنصر div به عنوان پدر و یک عنصر span به عنوان فرزند ایجاد می‌کنیم:

<div id="parent">
	<span id="child">وسط چین به صورت عمودی</span>
</div>

برای وسط‌چین کردن عمودی عنصر child از "‎:before" در parent کمک می‌گیریم. با تغییر ارتفاع، شکل نمایش و ویژگی vertical-align این عنصر، کل ارتفاع عنصر والد را به یک خط با ارتفاع ۱۰۰٪ تبدیل می‌کنیم.
در نتیجه، وسط‌چین کردن یک عنصر در خطی که قرار دارد، به کاری ساده تبدیل می‌شود.

#parent {
	height: 100px;
	background-color: khaki;
}
 
#parent:before {
	content: "";
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
 
#child {
	display: inline-block;
	vertical-align: middle;
	background-color: navy;
}

نتیجه‌ی کار در این قسمت قابل مشاهده است:

وسط چین به صورت عمودی

در صورت تمایل می‌توان به جای استفاده از pseudo element از یک عنصر واقعی، پیش از child هم بهره‌گیری کرد. تخصیص شیوه‌نامه‌ی تعریف‌شده برای "‎:before" به غیر از content به این عنصر، همین نتیجه را در پی خواهد داشت.

بیشتر بخوانید:

۵ نظر در مورد «وسط چین کردن عمودی عنصرها با کمک CSS»

    • امیرمسعود ایرانی می‌گوید:

      با سلام
      این مطلب با پیش‌فرض اینکه خواننده با چند مفهوم آشنایی دارد نوشته شده است
      برای روشن‌تر شدن:
      pseudo element : عنصرهایی هستند که در فایل html تعریف نمی‌شوند و با کمک css ایجاد می‌شوند. در مثال بالا، یک pseudo element در ابتدای عنصر div ایجاد می‌شود و با تغییر قالب‌بندی آن، می‌توانیم به هدف خودمان برسیم.
      vertical-align هم یکی از ویژگی‌های css است که وظیفه‌ی تنظیم محل عمودی عنصرها «در یک خط» را بر عهده دارد. در مثال بالا، ما دو عنصر داریم که هر دو را در وسط خط قرار می‌دهیم. با توجه به اینکه عنصر اول( pseudo element ) ارتفاعش ۱۰۰ درصد ارتفاع عنصر پدر است، بنابراین، یک خط با ارتفاع زیاد درست می‌کنیم و هر عنصری که در این خط قرار بگیرد، در وسط خط و در وسط عنصر پدر دیده می‌شود.

      پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *