• CSS: تراز عمودی متن. همه راه های تراز عمودی در CSS

    هنگام طراحی یک طرح بندی صفحه وب، احتمالاً با موقعیتی مواجه شده اید که باید با استفاده از CSS یک div را به صورت افقی و عمودی در مرکز قرار دهید. راه های مختلفی برای استفاده از CSS و jQuery وجود دارد.

    اما ابتدا اصول اولیه:

    تراز افقی با CSS

    نام کلاس(
    حاشیه: 0 خودکار;
    عرض: 200 پیکسل
    ارتفاع: 200 پیکسل;
    }

    برای وسط یک div فقط به صورت افقی، باید یک عرض و یک مقدار خودکار برای حاشیه‌های چپ و راست تعیین کنید (این یک شکل مختصر از نوشتن خصوصیات CSS است). این روش روی عناصر بلوک (div، p، h1 و غیره) کار می کند. برای اعمال آن بر روی عناصر درون خطی (مانند لینک ها و تصاویر)، باید قانون دیگری بنویسید - display:block .

    تراز افقی و عمودی با CSS

    مرکز div به صورت افقی و عمودی به طور همزمان کمی مشکل تر است. شما باید از قبل ابعاد div را بدانید.

    نام کلاس(
    عرض: 300 پیکسل
    ارتفاع: 200 پیکسل;
    موقعیت: مطلق;
    سمت چپ:50%;
    بالا:50%;
    حاشیه: -100px 0 0 -150px;
    }

    با موقعیت یابی مطلق یک عنصر، می توانیم آن را از جریان خارج کرده و موقعیت آن را نسبت به پنجره مرورگر تنظیم کنیم. با تنظیم افست div به 50% از سمت چپ و بالای پنجره، گوشه سمت چپ بالای صفحه را وسط می کنیم. تنها کاری که باید انجام دهید این است که div را به اندازه نیمی از عرض و ارتفاع آن به چپ و بالا ببرید، با مقادیر حاشیه منفی به طوری که کاملاً در مرکز قرار گیرد.

    تراز افقی و عمودی با jQuery

    همانطور که گفته شد، روش CSS فوق فقط روی divs با اندازه ثابت کار می کند. jQuery به کمک می آید:

    // اعلان تابع:
    $(window).resize(function()(
    $(".class-name").css((
    موقعیت: "مطلق"،
    سمت چپ: ($(window).width() - $(".class-name").outerWidth())/2،
    بالا: ($(window).height() - $(".class-name").outerHeight())/2
    });
    });
    // فراخوانی تابع:
    $(window).resize();

    این تابع هر زمان که کاربر اندازه پنجره را تغییر دهد، عرض پنجره را در $(window).resize() محاسبه می کند. ما از outerWidth() و outerHeight() استفاده می کنیم، زیرا بر خلاف width() و height() معمولی، padding و عرض حاشیه را اضافه می کنند و اندازه را برمی گرداند. در نهایت، ما با تغییر اندازه پنجره تطبیق می‌دهیم و div را در بارگذاری مجدد صفحه وسط می‌کنیم.

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

    بله، برای تراز عمودی در CSS یک ویژگی خاص vertical-align با مقادیر زیاد وجود دارد. با این حال، در عمل آن طور که انتظار می رود کار نمی کند. بیایید سعی کنیم این را بفهمیم.


    بیایید رویکردهای زیر را با هم مقایسه کنیم. همسویی با:

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

    دو عنصر div وجود دارد که یکی در دیگری تودرتو است. بیایید کلاس های مناسب - بیرونی و درونی - را به آنها بدهیم.


    هدف تراز کردن عنصر داخلی با مرکز عنصر بیرونی است.

    برای شروع، زمانی که اندازه بلوک بیرونی و داخلی را در نظر بگیرید شناخته شده. بیایید نمایش قانون را اضافه کنیم: inline-block به عنصر داخلی، و text-align: center و vertical-align: وسط به عنصر خارجی.

    به یاد داشته باشید که تراز فقط برای عناصری اعمال می شود که حالت نمایش درون خطی یا بلوک درون خطی دارند.

    بیایید اندازه بلوک‌ها و همچنین رنگ‌های پس‌زمینه را برای دیدن حاشیه‌های آنها تنظیم کنیم.

    بیرونی (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ تراز نوشتاری: مرکز؛ تراز عمودی: وسط؛ رنگ پس‌زمینه: #ffc؛ ) .داخلی (نمایش: بلوک درون خطی؛ عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ رنگ پس‌زمینه : #fcc;)
    پس از اعمال سبک ها، می بینیم که بلوک داخلی به صورت افقی تراز شده است، اما نه عمودی:
    http://jsfiddle.net/c1bgfffq/

    چرا این اتفاق افتاد؟واقعیت این است که ویژگی vertical-align روی تراز تأثیر می گذارد خود عنصر، نه محتوای آن(به جز زمانی که برای سلول های جدول اعمال می شود). بنابراین، اعمال این ویژگی برای عنصر بیرونی کاری انجام نداد. علاوه بر این، اعمال این ویژگی در عنصر داخلی نیز هیچ کاری انجام نمی دهد، زیرا بلوک های درون خطی به صورت عمودی با بلوک های همسایه تراز هستند و در مورد ما یک بلوک درون خطی داریم.

    چندین تکنیک برای حل این مشکل وجود دارد. بیایید نگاهی دقیق تر به هر یک از آنها در زیر بیاندازیم.

    تراز با جدول

    اولین راه حلی که به ذهن می رسد، جایگزینی بلوک بیرونی با جدول تک سلولی است. در این مورد، تراز به محتویات سلول، یعنی به بلوک داخلی اعمال می شود.


    http://jsfiddle.net/c1bgfffq/1/

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

    اولین منفی را می توان با جایگزینی تگ های جدول و td با div و تنظیم حالت نمایش جدول در CSS تا حدی حذف کرد.


    .outer-wrapper (نمایشگر: جدول؛) .outer (نمایشگر: جدول-سلول؛)
    با این وجود، بلوک بیرونی همچنان یک جدول با تمام عواقب بعدی باقی خواهد ماند.

    تراز با بالشتک

    اگر ارتفاع بلوک داخلی و خارجی مشخص باشد، می توان با استفاده از لایه بندی عمودی بلوک داخلی، تراز را با استفاده از فرمول: (H بیرونی - H داخلی) / 2 تنظیم کرد.

    بیرونی ( ارتفاع: 200 پیکسل؛ ) داخلی ( ارتفاع: 100 پیکسل؛ حاشیه: 50 پیکسل 0؛ )
    http://jsfiddle.net/c1bgfffq/6/

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

    تراز با ارتفاع خط

    اگر می دانید که بلوک داخلی نباید بیش از یک خط متن را اشغال کند، می توانید از ویژگی line-height استفاده کنید و آن را برابر با ارتفاع بلوک بیرونی قرار دهید. از آنجایی که محتوای بلوک داخلی نباید به خط دوم بپیچد، توصیه می‌شود که فضای سفید: nowrap و overflow: قوانین پنهان را نیز اضافه کنید.

    بیرونی ( ارتفاع: 200 پیکسل؛ ارتفاع خط: 200 پیکسل؛ ) .داخلی (فضای سفید: nowrap؛ سرریز: پنهان؛ )
    http://jsfiddle.net/c1bgfffq/12/

    این تکنیک همچنین می تواند برای تراز کردن متن چند خطی استفاده شود، اگر مقدار ارتفاع خط را برای بلوک داخلی لغو کنید و نمایش قوانین را اضافه کنید: inline-block و vertical-align: middle .

    بیرونی (ارتفاع: 200 پیکسل؛ ارتفاع خط: 200 پیکسل؛ ) .داخلی (ارتفاع خط: عادی؛ نمایشگر: بلوک درون خطی؛ تراز عمودی: وسط؛ )
    http://jsfiddle.net/c1bgfffq/15/

    عیب این روش این است که ارتفاع بلوک بیرونی باید مشخص باشد.

    تراز کششی

    این روش زمانی قابل استفاده است که ارتفاع بلوک بیرونی مشخص نیست، اما ارتفاع بلوک داخلی مشخص است.

    برای این شما نیاز دارید:

    1. موقعیت نسبی را به بلوک بیرونی و موقعیت مطلق را به بلوک داخلی تنظیم کنید.
    2. قوانین بالا: 0 و پایین: 0 را به بلوک داخلی اضافه کنید، در نتیجه به کل ارتفاع بلوک بیرونی کشیده می شود.
    3. مقدار را برای لایه عمودی بلوک داخلی روی auto تنظیم کنید.
    بیرونی ( موقعیت: نسبی؛ ) .داخلی (ارتفاع: 100 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ حاشیه: خودکار 0؛ )
    http://jsfiddle.net/c1bgfffq/4/

    ماهیت این تکنیک این است که تعیین ارتفاع برای یک بلوک کشیده و کاملاً موقعیت‌یافته باعث می‌شود که مرورگر در صورتی که مقدار آن‌ها روی خودکار تنظیم شود، لایه‌های عمودی را به نسبت مساوی محاسبه کند.

    تراز با حاشیه منفی بالا

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

    شما باید بلوک بیرونی را روی موقعیت نسبی و بلوک داخلی را روی موقعیت مطلق تنظیم کنید. سپس باید جعبه داخلی را تا نصف ارتفاع بالای جعبه بیرونی به پایین ببرید: 50٪ و آن را تا نصف ارتفاع حاشیه بالای جعبه به سمت بالا ببرید: -H داخلی / 2.

    بیرونی ( موقعیت: نسبی؛ ) .داخلی (ارتفاع: 100 پیکسل؛ موقعیت: مطلق؛ بالا: 50 درصد؛ حاشیه بالا: -50 پیکسل؛ )
    http://jsfiddle.net/c1bgfffq/13/

    عیب این روش این است که ارتفاع یونیت داخلی باید مشخص باشد.

    تراز با تبدیل

    این روش مشابه روش قبلی است، اما زمانی که ارتفاع بلوک داخلی ناشناخته باشد می توان آن را اعمال کرد. در این حالت، به جای تنظیم یک لایه منفی در پیکسل، می توانید از ویژگی transform استفاده کنید و کادر داخلی را با تابع translateY و مقدار -50% به بالا ببرید.

    بیرونی ( موقعیت: نسبی؛ ) .درونی ( موقعیت: مطلق؛ بالا: 50%؛ تبدیل: translateY(-50%)؛ )
    http://jsfiddle.net/c1bgfffq/9/

    چرا در روش قبلی تعیین مقدار به صورت درصد غیرممکن بود؟ از آنجایی که مقادیر درصدی ویژگی margin نسبت به عنصر والد است، مقدار 50% برابر با نصف ارتفاع جعبه بیرونی است و باید ارتفاع جعبه داخلی را نصف کنیم. این دقیقاً همان چیزی است که خاصیت transform برای آن است.

    عیب این روش این است که اگر بلوک داخلی دارای موقعیت مطلق باشد، نمی توان آن را اعمال کرد.

    تراز با Flexbox

    مدرن ترین راه برای تراز عمودی استفاده از طرح بندی جعبه انعطاف پذیر (که به عنوان فلکس باکس معروف است) است. این ماژول به شما این امکان را می دهد که به طور انعطاف پذیر موقعیت عناصر را در صفحه کنترل کنید و آنها را تقریباً در هر مکانی قرار دهید. تراز مرکزی برای Flexbox یک کار بسیار ساده است.

    بلوک بیرونی باید روی نمایش: flex و بلوک داخلی باید روی حاشیه: auto تنظیم شود. و این همه است! زیباست، نه؟

    بیرونی (نمایشگر: انعطاف پذیر؛ عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ ) .داخلی (عرض: 100 پیکسل؛ حاشیه: خودکار؛ )
    http://jsfiddle.net/c1bgfffq/14/

    عیب این روش این است که Flexbox فقط توسط مرورگرهای مدرن پشتیبانی می شود.

    کدام راه را انتخاب کنیم؟

    لازم است از بیان مشکل پیش برویم:
    • برای تراز عمودی متن، بهتر است از padding عمودی یا ویژگی line-height استفاده کنید.
    • برای عناصر کاملاً قرار گرفته با ارتفاع مشخص (مانند نمادها)، رویکرد حاشیه منفی در بالای صفحه ایده آل است.
    • برای موارد پیچیده تر که ارتفاع بلوک ناشناخته است، باید از یک شبه عنصر یا ویژگی تبدیل استفاده شود.
    • خوب، اگر به اندازه کافی خوش شانس هستید که نیازی به پشتیبانی از نسخه های قدیمی IE ندارید، مطمئناً Flexbox بهتر است.

    برچسب ها: اضافه کردن برچسب

    هنگام ایجاد بلوک‌های div، احتمالاً با موقعیت‌هایی برخورد کرده‌اید که باید با استفاده از CSS خالص، div خود را به صورت افقی و عمودی در مرکز قرار دهید. به عنوان مثال، هنگام ایجاد پنجره های بازشو با . راه‌های مختلفی برای پیاده‌سازی مرکز وجود دارد و در این مقاله به روش‌های مورد علاقه و ساده‌ترین راه‌ها، استفاده از CSS یا jQuery می‌پردازم.

    برای شروع، اصول اولیه:

    مرکز افقی در CSS

    انجام این کار آسان است، ما استفاده می کنیم لبهبرای ما بخشمسدود کردن.

    نام کلاس (حاشیه: 0 خودکار؛ عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ )

    برای وسط یک بلوک div فقط به صورت افقی، باید عرض بلوک (عرض) را تعیین کنید، از ویژگی استفاده کنید خودکاربرای تورفتگی (حاشیه) چپ و راست. این روش برای تمام عناصر بلوک (div، p، h1، و غیره ...) کار خواهد کرد. برای اعمال مرکز افقی برای عناصر درون خطی (پیوندها، تصاویر...)، باید گزینه را اعمال کنید نمایش دادن:مسدود کردن؛

    مرکز افقی و عمودی در CSS

    قرار دادن یک بلوک div به صورت افقی و عمودی به طور همزمان کمی پیچیده تر است. شما باید ابعاد بلوک div را از قبل بدانید.

    ClassName( عرض: 300 پیکسل؛ ارتفاع: 200 پیکسل؛ موقعیت: مطلق؛ سمت چپ: 50 درصد؛ بالا: 50 درصد؛ حاشیه: - 100 پیکسل 0 0 - 150 پیکسل؛ )

    با استفاده از مطلقموقعیت یابی بلوک، می توانیم آن را از عناصر اطراف جدا کنیم و موقعیت آن را نسبت به اندازه پنجره مرورگر تعیین کنیم. بلوک div را به 50% سمت چپ و بالای پنجره اکنون گوشه سمت چپ بالای بلوک در مرکز پنجره مرورگر قرار دارد. باقی مانده است که بلوک div را در مرکز صفحه با انتقال آن به آن تنظیم کنید نیمی از عرض آنبه سمت چپ و نصف قدشبالا هورا! مشخص شد که بلوک بسیار خوبی بر روی کد css خالص متمرکز شده است.

    مرکز افقی و عمودی با جی کوئری

    همانطور که قبلا ذکر شد، روش مرکزی CSS فقط با اندازه های ثابت کار می کند. اگر ابعاد تعریف نشده باشند، متد jQuery به کمک می آید:

    $(window).resize(function()($(".className").css(( position:"absolute", left: ($(window).width() - $(".className").outerWidth( ))/2، بالا: ($(window).height() - $(".className").outerHeight())/2 )); )); // برای اجرای یک تابع هنگام بارگیری پنجره: $(window).resize();

    عملکرد این متد اجرای تابع resize() با استفاده از خط است $(window).resize(). این تابع هر زمان که اندازه پنجره مرورگر تغییر کند کار می کند. ما استفاده می کنیم outerWidth()و ارتفاع خارجی ()زیرا بر خلاف عرض ()و ارتفاع ()، آنها شامل بالشتک و ضخامت حاشیه در اندازه ای هستند که برمی گردند. آخرین خط فرآیند مرکزیت div را در بارگذاری صفحه آغاز می کند.

    مزیت استفاده از این روش این است که لازم نیست بدانید که div چقدر است. اشکال اصلی این است که فقط زمانی کار می کند که جاوا اسکریپت فعال باشد. بنابراین، این روش برای رابط های چند منظوره مانند Vkontakte، Facebook و غیره قابل قبول است.

    مثل همیشه، شما می توانید با نوشتن در یک نظر، روش متمرکز کردن بلوک مورد علاقه خود را پیشنهاد دهید.
    همه افرادی که در چیدمان نقش دارند دیر یا زود با نیاز به تراز کردن عناصر به صورت عمودی مواجه می شوند... و می دانند هنگام تراز کردن یک عنصر با مرکز چه مشکلاتی ممکن است ایجاد شود. CSS دارای یک ویژگی «تراز عمودی» با مقادیر متعدد است که به طور منطقی باید تراز عمودی را انجام دهد. با این حال، در عمل آن طور که انتظار می رود کار نمی کند.

    چندین تکنیک برای حل این مشکل وجود دارد. بیایید نگاهی دقیق تر به هر یک از آنها در زیر بیاندازیم.

    1. تراز کردن با یک جدول

    در این مورد، ما بلوک بیرونی را با یک جدول تک سلولی جایگزین می کنیم. تراز به محتویات سلول، یعنی بلوک داخلی اعمال خواهد شد.

    HTML

    css

    بیرونی (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ تراز متن: مرکز؛ تراز عمودی: وسط؛ رنگ پس‌زمینه: #ffc؛ )

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

    اولین منفی را می توان با جایگزینی تگ های جدول با div و تنظیم حالت نمایش جدول در CSS تا حدی واگرد کرد.

    HTML

    css

    Outer-wrapper (نمایشگر: جدول؛ ) .outer (نمایش: جدول-سلول;)

    2. تراز با بالشتک

    به شرطی که ارتفاع بلوک های داخلی و خارجی را بدانیم، تراز را می توان با استفاده از فرورفتگی های عمودی بلوک داخلی، با استفاده از فرمول: (H بیرونی - H داخلی) / 2 تنظیم کرد.

    css

    بیرونی ( ارتفاع : 200 پیکسل ؛ ) داخلی ( ارتفاع : 100 پیکسل ؛ حاشیه : 50 پیکسل 0 ؛ )

    نقطه ضعف راه حل، دانستن اجباری ارتفاع هر دو بلوک است.

    3. تراز با خط ارتفاع

    اگر بلوک داخلی بیش از یک خط متن را اشغال نمی کند، می توانید از ویژگی line-height استفاده کنید و آن را برابر با ارتفاع بلوک بیرونی قرار دهید. از آنجایی که محتوای بلوک داخلی نباید به خط دوم برود، ایده خوبی است که فضای سفید: nowrap و overflow: قوانین پنهان را نیز اضافه کنید.

    css

    بیرونی ( ارتفاع : 200 پیکسل ؛ ارتفاع خط : 200 پیکسل ؛ ) .داخلی ( فضای سفید : nowrap ؛ سرریز : پنهان ؛ )

    از این روش می توان برای تراز کردن متن چند خطی نیز استفاده کرد. برای انجام این کار، بلوک داخلی باید مقدار line-height را نادیده بگیرد و همچنین نمایش قوانین را اضافه کند: inline-block و vertical-align: middle .

    css

    بیرونی (ارتفاع: 200 پیکسل؛ ارتفاع خط: 200 پیکسل؛ ) .داخلی (ارتفاع خط: عادی؛ نمایشگر: بلوک درون خطی؛ تراز عمودی: وسط؛ )

    عیب این روش این است که ارتفاع بلوک بیرونی باید مشخص باشد.

    4. تراز کردن با "کشش"

    این روش زمانی قابل استفاده است که ارتفاع بلوک داخلی برای ما مشخص باشد، اما خارجی آن مشخص نیست.

    برای اعمال این روش نیاز داریم:

    • بلوک بیرونی را روی موقعیت: نسبی و بلوک داخلی را روی موقعیت مطلق قرار دهید: مطلق ;
    • چند قانون بالا: 0 و پایین: 0 را به بلوک داخلی اضافه کنید، در نتیجه به کل ارتفاع بلوک بیرونی کشیده می شود.
    • بالشتک عمودی بلوک داخلی را روی خودکار تنظیم کنید.

    css

    بیرونی (موقعیت: نسبی؛) .داخلی (ارتفاع: 100 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ حاشیه: خودکار 0؛)

    5. تراز با حاشیه منفی بالا

    مشابه روش قبلی، از این روش زمانی استفاده می شود که ارتفاع بلوک بیرونی مشخص نیست، اما ارتفاع بلوک داخلی مشخص است.

    شما باید بلوک بیرونی را روی موقعیت نسبی و بلوک داخلی را روی موقعیت مطلق تنظیم کنید. سپس جعبه داخلی را به نصف ارتفاع بالای جعبه بیرونی: 50% به پایین ببرید و آن را تا نصف ارتفاع حاشیه بالای جعبه به سمت بالا ببرید: -H درونی / 2 .

    css

    بیرونی (موقعیت: نسبی؛) .داخلی (ارتفاع: 100 پیکسل؛ موقعیت: مطلق؛ بالا: 50%؛ حاشیه بالا: -50 پیکسل؛ )

    عیب این روش این است که ارتفاع یونیت داخلی باید مشخص باشد.

    6. تراز با تبدیل

    این روش زمانی قابل استفاده است که ارتفاع یونیت داخلی مشخص نباشد. باید کادر داخلی را به نصف ارتفاع جعبه بیرونی پایین ببرید: 50٪، سپس از ویژگی transform استفاده کنید و آن را با تابع translateY(-50%) به بالا ببرید.

    css

    بیرونی ( موقعیت : نسبی ؛ ) .درونی ( موقعیت : مطلق ؛ بالا : 50 % ؛ تبدیل : translateY (-50 % )؛ )

    7. تراز با شبه عنصر

    این چندمنظوره ترین روشی است که می توان از آن در مواقعی که ارتفاع هر دو بلوک نامشخص است استفاده کرد.

    ماهیت روش اضافه کردن یک بلوک درون خطی با ارتفاع 100٪ در داخل بلوک بیرونی و تنظیم آن به تراز عمودی است. بنابراین، ارتفاع بلوک اضافه شده برابر با ارتفاع بلوک بیرونی خواهد بود. بلوک داخلی به صورت عمودی با بلوک اضافه شده و از این رو بلوک بیرونی تراز خواهد شد.

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

    css

    بیرونی: قبل (نمایش: بلوک درون خطی؛ ارتفاع: 100%؛ تراز عمودی: وسط؛ محتوا: ""؛ ) .inner (نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ )

    عیب این روش این است که نمی توان با موقعیت یابی مطلق یونیت داخلی استفاده کرد.

    8. تراز با Flexbox

    مدرن ترین راه برای تراز عمودی استفاده از طرح بندی جعبه انعطاف پذیر (یا به اختصار) است فلکس باکس). این امکان را به شما می دهد تا موقعیت عناصر را در صفحه به طور انعطاف پذیر کنترل کنید و آنها را تقریباً در هر مکانی قرار دهید. تراز مرکزی برای Flexbox یک کار بسیار ساده است.

    مرکز کردن عناصر به صورت عمودی با CSS یک چالش برای توسعه دهندگان است. با این حال، چندین روش برای حل آن وجود دارد که بسیار ساده هستند. این درس 6 گزینه برای تمرکز عمودی محتوا ارائه می دهد.

    بیایید با توضیح کلی مشکل شروع کنیم.

    مشکل مرکز عمودی

    مرکز افقی بسیار ساده و آسان است. هنگامی که عنصر مرکزی درون خط است، از ویژگی alignment نسبت به عنصر والد استفاده کنید. هنگامی که عنصر بلوک است - عرض آن را تنظیم کنید و به طور خودکار حاشیه های چپ و راست را تنظیم کنید.

    اکثر افراد هنگام استفاده از ویژگی text-align: به خاصیت vertical-align برای وسط عمودی مراجعه می کنند. همه چیز کاملا منطقی به نظر می رسد. اگر از قالب‌های جدول استفاده کرده‌اید، احتمالاً از ویژگی valign به طور گسترده استفاده کرده‌اید، که این باور را تقویت می‌کند که عمودی تراز کردن راه درستی است.

    اما ویژگی valign فقط روی سلول های جدول کار می کند. و ویژگی vertical-align بسیار شبیه است. همچنین بر سلول های جدول و برخی از عناصر درون خطی تأثیر می گذارد.

    مقدار ویژگی vertical-align نسبت به عنصر درون خطی والد است.

    • در یک خط متن، تراز نسبت به ارتفاع خط است.
    • سلول جدول از تراز با توجه به مقدار محاسبه شده توسط یک الگوریتم خاص استفاده می کند (معمولاً ارتفاع خط به دست می آید).

    اما متأسفانه، ویژگی vertical-align روی عناصر سطح بلوک (مانند پاراگراف های داخل یک عنصر div) کار نمی کند. این وضعیت ممکن است به این ایده منجر شود که هیچ راه حلی برای مشکل تراز عمودی وجود ندارد.

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

    روش ارتفاع خط

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

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

    HTML:

    متن مورد نظر

    CSS:

    #child (قد خط: 200 پیکسل؛ )

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

    وسط یک تصویر با ارتفاع خط

    اگر محتوا یک تصویر باشد چه؟ آیا روش فوق جواب می دهد؟ پاسخ در خط دیگری از کد CSS نهفته است.

    HTML:

    CSS:

    #parent (ارتفاع خط: 200 پیکسل؛ ) #img والد ( تراز عمودی: وسط؛ )

    مقدار ویژگی line-height باید بیشتر از ارتفاع تصویر باشد.

    روش جدول CSS

    همانطور که در بالا ذکر شد، ویژگی vertical-align برای سلول های جدول اعمال می شود، جایی که عالی عمل می کند. می‌توانیم عنصر خود را به‌عنوان یک سلول جدول رندر کنیم و از ویژگی vertical-align روی آن برای مرکزیت عمودی محتوا استفاده کنیم.

    توجه داشته باشید:یک جدول CSS با جدول HTML یکسان نیست.

    HTML:

    محتوا

    CSS:

    #والد (نمایش: جدول؛) #فرزند (نمایش: سلول جدول؛ تراز عمودی: وسط؛ )

    خروجی جدول را روی div والد تنظیم می کنیم و div تودرتو را به عنوان سلول جدول رندر می کنیم. اکنون می توانید از ویژگی vertical-align در ظرف داخلی استفاده کنید. همه چیز در آن به صورت عمودی در مرکز قرار می گیرد.

    بر خلاف روش بالا، در این مورد محتوا می تواند پویا باشد، زیرا عنصر div به اندازه محتوای خود تغییر می کند.

    عیب این روش این است که در نسخه های قدیمی IE کار نمی کند. باید از ویژگی display: inline-block برای ظرف تودرتو استفاده کنید.

    موقعیت یابی مطلق و حاشیه های منفی

    این روش در تمامی مرورگرها نیز کار می کند. اما مستلزم آن است که به عنصر مرکز یک ارتفاع داده شود.

    کد مثال هم مرکز افقی و هم عمودی را همزمان انجام می دهد:

    HTML:

    محتوا

    CSS:

    #والد (موقعیت: نسبی؛) #فرزند ( موقعیت: مطلق؛ بالا: 50٪؛ سمت چپ: 50٪؛ قد: 30٪؛ عرض: 50٪؛ حاشیه: -15٪ 0 0 -25٪؛ )

    ابتدا نوع موقعیت یابی عناصر را تنظیم می کنیم. سپس، روی div تودرتو، ویژگی های بالا و چپ را روی 50% تنظیم کنید که مرکز عنصر والد است. اما گوشه سمت چپ بالای عنصر تودرتو در مرکز قرار می گیرد. بنابراین، باید آن را بلند کنید (نصف ارتفاع) و به سمت چپ (نصف عرض) حرکت دهید و سپس مرکز با مرکز عنصر والد منطبق شود. بنابراین دانستن ارتفاع عنصر در این مورد ضروری است. سپس به عنصر منفی حاشیه بالا و چپ به ترتیب برابر با نصف ارتفاع و عرض می دهیم.

    این روش در همه مرورگرها کار نمی کند.

    موقعیت و کشش مطلق

    کد مثال، مرکزیت عمودی و افقی را انجام می دهد.

    HTML:

    محتوا

    CSS:

    #والد (موقعیت: نسبی؛) #فرزند ( موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ چپ: 0؛ سمت راست: 0؛ عرض: 50%؛ قد: 30%؛ حاشیه: خودکار؛ )

    ایده پشت این روش این است که با تنظیم ویژگی های بالا، پایین، راست و چپ روی 0، عنصر تودرتو به هر 4 مرز عنصر والد کشیده شود.

    با تنظیم حاشیه‌ها در همه طرف‌ها روی خودکار، مقادیر در هر 4 طرف برابر هستند و عنصر div تودرتو ما را به مرکز عنصر والد می‌آورد.

    متأسفانه این روش در IE7 به بالا کار نمی کند.

    بالشتک بالا و پایین برابر است

    این روش صریحاً لایه های مساوی را در بالا و پایین عنصر والد تنظیم می کند.

    HTML:

    محتوا

    CSS:

    #والد ( بالشتک: 5% 0؛ ) #فرزند ( بالشتک: 10% 0؛ )

    در کد CSS برای مثال، padding بالا و پایین برای هر دو عنصر تنظیم شده است. برای یک عنصر تو در تو، تنظیم بالشتک در مرکز عمودی آن عمل می کند. و بالشتک عنصر والد، عنصر تودرتو را در آن مرکز خواهد کرد.

    واحدهای نسبی برای تغییر اندازه عناصر به صورت پویا استفاده می شوند. و برای واحدهای اندازه گیری مطلق، باید محاسبات را انجام دهید.

    به عنوان مثال، اگر عنصر والد 400 پیکسل ارتفاع و عنصر تو در تو 100 پیکسل باشد، 150 پیکسل در بالا و پایین مورد نیاز است.

    150 + 150 + 100 = 400

    استفاده از % باعث می شود که محاسبات به مرورگر سپرده شود.

    این روش در همه جا کار می کند. نکته منفی نیاز به محاسبات است.

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

    شناور div

    این روش از یک عنصر div خالی استفاده می کند که شناور می شود و به کنترل موقعیت عنصر تو در تو در سند کمک می کند. توجه داشته باشید که div شناور قبل از عنصر تودرتو در کد HTML قرار می گیرد.

    HTML:

    محتوا

    CSS:

    #والد (قد: 250 پیکسل؛) # شناور ( شناور: سمت چپ؛ ارتفاع: 50 درصد؛ عرض: 100 درصد؛ حاشیه پایین: -50 پیکسل؛ ) #فرزند ( واضح: هر دو؛ قد: 100 پیکسل؛ )

    div خالی را به سمت چپ یا راست افست می کنیم و به آن ارتفاع 50 درصد عنصر والد می دهیم. به این ترتیب نیمه بالایی عنصر والد را پر می کند.

    از آنجایی که این div شناور است، از جریان عادی سند حذف می شود و باید عنصر تودرتو را باز کنیم. در مثال از clear: هر دو استفاده می شود، اما کافی است از همان جهت به عنوان افست div خالی شناور استفاده شود.

    حاشیه بالایی عنصر div تو در تو درست زیر مرز پایینی عنصر div خالی است. باید عنصر تودرتو را به اندازه نصف ارتفاع عنصر خالی شناور به سمت بالا حرکت دهیم. برای حل مشکل، از مقدار منفی ویژگی margin-bottom برای یک عنصر div خالی شناور استفاده می‌شود.

    این روش در تمامی مرورگرها نیز کار می کند. با این حال، استفاده از آن به یک عنصر div خالی اضافی و آگاهی از ارتفاع عنصر تودرتو نیاز دارد.

    نتیجه

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

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