• چگونه صفحه را در مرکز قرار دهیم. تراز افقی و عمودی عناصر در CSS

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

    مرکزیت ساده یک عنصر DIV در یک صفحه

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

    css

    Center-div ( حاشیه: 0 خودکار؛ عرض: 100 پیکسل؛ )

    مثال

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

    قرار دادن یک DIV در داخل یک عنصر DIV به روش قدیمی

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

    css

    Outer-div ( padding: 30px; ) .inner-div ( حاشیه: 0 خودکار؛ عرض: 100px؛ )

    HTML

    مثال

    دیو بیرونی را می توان هر طور که دوست دارید قرار داد، اما دریچه داخلی باید عرض مشخصی داشته باشد ( عرض).

    مرکز کردن یک DIV در داخل یک عنصر DIV با بلوک درون خطی

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

    css

    Outer-div (بالشتک: 30 پیکسل؛ تراز متن: مرکز؛ ) .inner-div (نمایش: بلوک درون خطی؛ پد: 50 پیکسل؛ )

    HTML

    مثال

    ویژگی text-align فقط روی عناصر درون خطی کار می کند. مقدار inline-block اجازه می دهد تا div داخلی به عنوان یک عنصر درون خطی و همچنین یک بلوک ارائه شود ( بلوک درون خطی). ویژگی text-align در قسمت بیرونی به ما این امکان را می دهد که div داخلی را در مرکز قرار دهیم.

    قرار دادن یک DIV در داخل یک عنصر DIV به صورت افقی و عمودی

    اینجا حاشیه: auto برای وسط div در مرکز صفحه استفاده می شود. این مثال در تمام مرورگرهای مدرن کار خواهد کرد.

    css

    Outer-div ( padding: 30px; ) .inner-div ( حاشیه: auto; عرض: 100px; ارتفاع: 100px; )

    HTML

    مثال

    div داخلی باید عرض داشته باشد ( عرض) و ارتفاع ( ارتفاع). این روش کار نخواهد کرد اگر div بیرونی یک ارتفاع ثابت داشته باشد.

    وسط یک DIV در پایین صفحه

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

    css

    Outer-div ( موقعیت: مطلق؛ پایین: 30 پیکسل؛ عرض: 100٪؛ ) .inner-div ( حاشیه: 0 خودکار؛ عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ رنگ پس‌زمینه: #cccc؛ )

    HTML

    مثال

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

    مرکز DIV روی صفحه به صورت عمودی و افقی

    در اینجا، برای تراز وسط div، margin: auto دوباره استفاده می شود و div بیرونی در موقعیت مطلق قرار می گیرد. این روش در تمام مرورگرهای مدرن کار خواهد کرد.

    css

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

    مثال

    عنصر div باید یک مجموعه عرض داشته باشد ( عرض) و ارتفاع ( ارتفاع).

    مرکز پاسخگوی یک عنصر DIV در یک صفحه

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

    css

    Center-div ( حاشیه: 0 خودکار؛ حداکثر عرض: 700 پیکسل؛ )

    مثال

    div مرکزی باید ویژگی حداکثر عرض خود را داشته باشد.

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

    div داخلی در اینجا پاسخگو است. این روش وسط یک div در داخل یک div در همه مرورگرها کار می کند.

    css

    Outer-div ( padding: 30px; ) .inner-div ( حاشیه: 0 خودکار؛ حداکثر عرض: 700px؛ )

    HTML

    مثال

    div داخلی باید ویژگی حداکثر عرض خود را داشته باشد.

    قرار دادن دو div پاسخگو در کنار یکدیگر

    در اینجا ما دو div پاسخگو در کنار هم داریم. این روش وسط div روی صفحه نمایش در همه مرورگرهای مدرن کار می کند.

    css

    ظرف (تراز نوشتاری: مرکز؛ ) .left-div (نمایش: بلوک درون خطی؛ حداکثر عرض: 300 پیکسل؛ تراز عمودی: بالا؛ ) .راست-div (نمایش: بلوک درون خطی؛ حداکثر عرض: 150 پیکسل. ) صفحه و (حداکثر عرض: 600 پیکسل) ( .left-div, .right-div ( حداکثر عرض چپ: 100%؛ ))

    HTML

    مثال

    در اینجا ما چندین عنصر با ویژگی inline-block اعمال شده در داخل یک ظرف مرکزی داریم. این مثال همچنین از پرس و جوهای رسانه ای CSS استفاده می کند. یعنی اگر اندازه صفحه نمایش کمتر از 600 پیکسل باشد، ویژگی max-width برای هر دو div چپ و راست روی 100٪ تنظیم می شود.

    عنصر DIV در مرکز Flexbox

    در اینجا ما CSS div را با استفاده از Flexbox در مرکز قرار می دهیم. در نظر گرفته شده است که فرآیند طراحی رابط کاربری را آسان تر کند. این افزونه توسط Chrome 38+، IE11، Microsoft Edge، Firefox 38+، Safari 9+، Opera 30+، iOS Safari 9+ و Android Browser 40+ پشتیبانی می‌شود.

    css

    کانتینر (نمایش: انعطاف‌پذیر، تراز کردن آیتم‌ها: مرکز، توجیه محتوا: مرکز، ارتفاع: 100 ولت ساعت، ) .مورد (رنگ پس‌زمینه: #f3f2ef، شعاع حاشیه: 3 پیکسل، عرض: 200 پیکسل، ارتفاع: 100 پیکسل؛ )

    خواننده گرامی امروز به مشکل تراز عمودی در بلوک می پردازیم بخش.

    احتمالاً قبلاً از وجود ویژگی فوق العاده CSS اطلاع دارید تراز عمودیو خود خداوند به ما دستور داده است که از این خاصیت برای تراز عمودی استفاده کنیم (بیهوده نیست که چنین نام واضحی دارد).

    فرمول مسئله:لازم است محتویات بلوک ارتفاع متغیر در مرکز نسبت به عمودی تراز شود.

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

    و بنابراین، ما یک بلوک داریم، ارتفاع آن می تواند تغییر کند:

    مسدود کردن محتوا

    اولین چیزی که به ذهن می رسد این است که تظاهر زیر را انجام دهید:

    مسدود کردن محتوا

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

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

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

    تراز عمودی عناصر درون خطی

    فرض کنید یک خط متن دارید که با تگ های درون خطی شکسته شده است به قطعات:

    شما استقبال می کند قطعهمتن

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

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

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

    ظرف هنگام تنظیم بخشی از متن با قالب بندی خاص (برجستگی با رنگ، با فونت متفاوت و غیره) استفاده از آن راحت است.

    برای ظروف ویژگی های CSS زیر را اعمال کنید:

    #perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

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

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

    کمی منحرف می شویم، اکنون به وظیفه اصلی خود باز می گردیم.

    تراز عمودی در یک ظرف div

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

    چگونه می توانیم از آن استفاده کنیم؟ ما یک میز نداریم، ما با ظرف div کار می کنیم.

    ها، معلوم است که بسیار ساده است.

    ویژگی CSS نمایش دادنبه شما امکان می دهد بلوک div خود را به یک سلول جدول تبدیل کنید، این کار را می توان به راحتی و به طور طبیعی انجام داد:

    بیایید یک گروه کلاس داشته باشیم textalign:

    مسدود کردن محتوا

    برای این بلوک، ویژگی CSS زیر را مشخص کنید:

    Textalign (نمایش: سلول جدول؛ )

    این دستور CSS به طور معجزه آسایی بلوک div ما را بدون تغییر بصری به سلول جدول تبدیل می کند. و برای سلول جدول می توانیم خاصیت را اعمال کنیم تراز عمودیبه طور کامل و مرکز عمودی مورد نظر کار خواهد کرد.

    با این حال، همه چیز نمی تواند به این سادگی تمام شود. ما همچنین یک مرورگر فوق العاده IE داریم. نمی داند چگونه با ملک کار کند نمایش: سلول جدول(پیشنهاد می کنم با جدول نشان دهنده عملکرد این ویژگی CSS در مرورگرهای مختلف سایت htmlbook.ru آشنا شوید). بنابراین باید به سراغ ترفندهای مختلفی برویم.

    راه های زیادی برای دستیابی به تراز در یک ظرف div برای همه مرورگرها وجود دارد:

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

    همانطور که متوجه شدید، ما باید مشکل تراز عمودی در اینترنت اکسپلورر مرتبط با درک نادرست آن از ویژگی را حل کنیم. نمایش: سلول جدول(نه IE6 و نه IE7 و نه IE8با این ویژگی آشنا نیستند). بنابراین، با استفاده از نظر مشروطبه طور خاص برای مرورگرهای خانواده IE، سایر ویژگی های CSS را مشخص می کنیم.

    نظر مشروط

    مشاهده طرح:

    ... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

    نظر شرطی نامیده می شود (مراقب باشید، نوع نظر شرطی باید کاملاً با مثال داده شده تا یک فاصله مطابقت داشته باشد).

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

    بنابراین، با استفاده از یک نظر شرطی، می‌توانیم یک قطعه کد را از همه مرورگرها به جز IE پنهان کنیم.

    راه حل مشکل

    به دلیل این همه جعفری، ما باید کد HTML خود را با دو ظرف اضافی ارائه کنیم. بلوک ما با متن به این صورت خواهد بود:

    این یک نوع متن آزمایشی است.
    از دو خط تشکیل شده است.

    برای کلاس کانتینر div textalignویژگی های CSS تنظیم شده اند که محتوای آن را به صورت عمودی برای همه مرورگرهای معمولی تراز می کند (البته به جز IE):

    صفحه نمایش: جدول-سلول. vertical-align: وسط;

    و دو ویژگی دیگر که عرض و ارتفاع بلوک را تعیین می کند:

    عرض: 500 پیکسل؛ ارتفاع: 500 پیکسل؛

    این برای تراز کردن محتویات ظرف در مرکز نسبت به عمودی در همه مرورگرها کافی است به جز IE.

    اکنون شروع به اضافه کردن ویژگی های مربوط به align می کنیم برای مرورگرهای خانواده IE(برای آنها است که ما از بلوک های اضافی استفاده کردیم بخشو طول):

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

    Textalign div( موقعیت: مطلق؛ بالا: 50%؛ )

    این ساختار به این معنی است: برای همه تگ های div داخل بلوک با کلاس textalignخواص ذکر شده را اعمال کنید.

    بر این اساس، سبک ها برای بلوک تنظیم شده است textalignاصلاح می شوند:

    Textalign (نمایش: سلول جدول؛ تراز عمودی: وسط؛ عرض: 500 پیکسل؛ ارتفاع: 500 پیکسل؛ موقعیت: نسبی؛ )

    اکنون نقطه بالای سمت چپ کادر متن 50 درصد به پایین جابه جا شده است.

    برای توضیح آنچه در حال رخ دادن است، یک تصویر کشیدم:

    همانطور که در تصویر می بینید، ما پیشرفت هایی داشته ایم. اما این همه ماجرا نیست! نقطه سمت چپ بالای بلوک زرد در واقع 50٪ از بلوک اصلی (بنفش) خود به پایین حرکت کرده است. اما چیزی که ما نیاز داریم این است که در پنجاه درصد ارتفاع بلوک بنفش باشد مرکز بلوک زرد، نه نقطه سمت چپ بالای آن.

    حالا تگ می رود طولو موقعیت نسبی آن:

    Textalign span( موقعیت: نسبی؛ بالا: -50%؛ )

    بنابراین، ما بلوک زرد را 50٪ از ارتفاع آن، نسبت به موقعیت اولیه، به سمت بالا منتقل کرده ایم. همانطور که متوجه شدید، ارتفاع بلوک زرد برابر با ارتفاع محتوای مرکز است. و آخرین عملیات span محتوای ما را در وسط جعبه بنفش قرار می دهد. هورا!

    بیایید کمی شمن کنیم

    اول از همه، ما باید جعفری را از همه مرورگرهای معمولی مخفی کنیم و آن را برای IE باز کنیم. این را می توان انجام داد، البته به کمک یک کامنت مشروط، بیهوده نبود که با او آشنا شدیم:

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

    راه حل مشکل:ملک باید اضافه شود سرریز: پنهانتوده textalign

    با جزئیات ملک آشنا شوید سرریزممکن در .

    نمای نهایی دستورالعمل های CSS برای بلوک textalignبه نظر می رسد:

    Textalign (نمایش: سلول جدول؛ تراز عمودی: وسط؛ عرض: 500 پیکسل؛ ارتفاع: 500 پیکسل؛ موقعیت: نسبی؛ سرریز: پنهان؛ حاشیه: 1 پیکسل سیاه و سفید؛ )

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

    مرکز در یک بلوک ارتفاع متغیر

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

    نکته مهم این است که انجام این کار برای یک سلول جدول (و بلوک کلاس) غیرممکن است textalignبه لطف ویژگی به سلول جدول تبدیل می شود نمایش: سلول جدول).

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

    به منظور پیاده سازی یک بلوک با ارتفاع متغیر در مثال ما، CSS را کمی ویرایش می کنیم:

    کلاس textalignما ارزش ملک را تغییر خواهیم داد نمایش دادنبا سلول جدولبر جدولو دستورالعمل تراز را حذف کنید عمودی- تراز: وسط. اکنون می توانیم با خیال راحت مقدار ارتفاع را از 500 پیکسل به مثلاً 100 درصد تغییر دهیم.

    بنابراین ویژگی های CSS برای بلوک کلاس textalignبه این صورت خواهد بود:

    Textalign (نمایش: جدول؛ عرض: 500 پیکسل؛ ارتفاع: 100 درصد؛ موقعیت: نسبی؛ سرریز: پنهان؛ حاشیه: 1 پیکسل سیاه و سفید؛ )

    باقی مانده است که تمرکز محتوا را پیاده سازی کنیم. برای انجام این کار، ظرف div در بلوک کلاس تودرتو است textalign(این همان بلوک زرد در شکل است)، باید ویژگی CSS را تنظیم کنید نمایش: سلول جدول، سپس ارتفاع 100% از بلوک والد را به ارث می برد textalign(بلوک بنفش). و هیچ چیز ما را از تراز کردن محتویات ظرف div تودرتو در مرکز با ویژگی باز نمی دارد عمودی- تراز: وسط.

    دریافت لیست اضافی دیگری از ویژگی های CSS برای div تو در تو در کانتینر textalign.

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

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

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

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

    1. تراز افقی به مرکز بلوک / صفحه

    1.1. اگر بلوک دارای عرض باشد:

    div (عرض: 300 پیکسل؛ حاشیه: 0 خودکار؛ /*مرکز کردن عنصر به صورت افقی در بلوک والد*/)

    اگر می خواهید یک عنصر درون خطی را به این ترتیب تراز کنید، باید آن را طوری تنظیم کنید که نمایش داده شود: block;

    1.2. اگر بلوکی درون بلوک دیگری تو در تو باشد و هیچ عرضی برای آن تنظیم/تنظیم نشده باشد:

    .wrapper(text-align:center;)

    1.3. اگر بلوک دارای عرض است و باید در مرکز بلوک مادر ثابت شود:

    .wrapper (موقعیت: نسبی؛ /* کادر والد را روی موقعیت نسبی قرار دهید تا بتوانیم بعداً جعبه را کاملاً داخل آن قرار دهیم*/) .box (عرض: 400 پیکسل؛ موقعیت: مطلق؛ سمت چپ: 50٪؛ حاشیه-چپ: - 200 پیکسل؛ / *بلوک را با فاصله ای معادل نصف عرض آن به سمت چپ تغییر دهید*/ )

    1.4. اگر هیچ عرضی برای بلوک‌ها تنظیم نشده است، می‌توانید با استفاده از بلوک بسته‌بندی والد در مرکز قرار دهید:

    .wrapper (تراز کردن متن: مرکز؛ /*محتوای بلوک را در مرکز قرار دهید*/) تورفتگی بین بلوک ها*/ )

    2. تراز عمودی

    2.1. اگر متن یک خط را اشغال کند، به عنوان مثال، برای دکمه ها و آیتم های منو:

    دکمه (ارتفاع: 50 پیکسل؛ ارتفاع خط: 50 پیکسل؛ )

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

    .wrapper (موقعیت: نسبی؛) .box (ارتفاع: 100px؛ موقعیت: مطلق؛ بالا: 50%؛ حاشیه: -50px 0 0 0؛ )

    2.3. تراز عمودی بر اساس نوع جدول:

    .wrapper (نمایش: جدول؛ عرض: 100%؛ ) .box (نمایش: سلول جدول؛ ارتفاع: 100 پیکسل؛ تراز متن: مرکز؛ تراز عمودی: وسط؛ )

    2.4. اگر جعبه دارای عرض و ارتفاع تنظیم شده است و باید بر روی جعبه والد متمرکز شود:

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

    2.5. موقعیت یابی مطلق در مرکز صفحه/بلوک با استفاده از تبدیل CSS3:

    اگر عنصر دارای ابعاد باشد

    div ( عرض: 300 پیکسل؛ /*عرض بلوک را تنظیم کنید*/ ارتفاع: 100 پیکسل؛ /*ارتفاع بلوک را تنظیم کنید*/ تبدیل: translate(-50%, -50%)؛ موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50 درصد ;)

    اگر عنصر فاقد ابعاد باشد و خالی نباشد

    چند متن اینجا

    h1 ( حاشیه: 0؛ تبدیل: ترجمه (-50٪، -50%)؛ موقعیت: مطلق؛ بالا: 50٪؛ سمت چپ: 50٪؛ )

    طراحان وب هر روز در محل کار از DIV ها استفاده می کنند. بدون اغراق، این محبوب ترین برچسب است. منبع هر سایتی را باز کنید، خواهید دید که بیشتر، اگر نه دو سوم از اشیاء در

    . حتی با ظهور HTML5 و ظهور رقبای جدی در قالب مقاله یا هدر، همچنان در همه جا به نشانه گذاری وارد می شود. بنابراین، پیشنهاد می کنم به موضوع قالب بندی و تراز کردن بلوک های div در مرکز بپردازید.

    DIV چیست؟

    نام عنصر از کلمه انگلیسی division گرفته شده است که به معنای تقسیم است. هنگام نوشتن نشانه گذاری، برای شکستن عناصر به بلوک ها استفاده می شود. DIV ها گروه هایی از محتوا را در یک صفحه وب محصور می کنند. به عنوان مثال، تصاویر، پاراگراف ها با متن. این تگ به هیچ وجه بر نمایش محتوا تأثیر نمی گذارد و بار معنایی ندارد.

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

    زمان استفاده از DIV

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

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

    سند

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

    مرکز DIV را با حاشیه ها تراز کنید

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

    div( حاشیه: 1px جامد #333؛ حاشیه سمت چپ: هیچکدام؛ )

    این ویژگی ها فضای خالی بین اشیاء را اضافه می کنند و همچنین به آنها کمک می کند تا آنها را به صورت دلخواه در یک راستا قرار دهند. به عنوان مثال، اگر بلوک تصویر باید از لبه سمت چپ به مرکز 20% جابجا شود، شما حاشیه-چپ را به عنصر با مقدار 20% اختصاص می دهید:

    Block-with-img (حاشیه-چپ: 20%؛ )

    عناصر همچنین می توانند با استفاده از مقادیر عرض و لایه منفی آنها قالب بندی شوند. به عنوان مثال، یک بلوک با ابعاد 200 پیکسل در 200 پیکسل وجود دارد. ابتدا یک موقعیت مطلق به آن اختصاص دهید و 50٪ آن را به مرکز منتقل کنید.

    Div( موقعیت: مطلق؛ چپ: 50%؛ )

    اکنون، برای اطمینان از اینکه DIV کاملاً در مرکز قرار دارد، یک لایه منفی سمت چپ برابر با 50٪ عرض آن، یعنی -100 پیکسل به آن بدهید.

    حاشیه سمت چپ: -100 پیکسل

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

    بنابراین زمانی که نیاز دارید یک DIV را در مرکز قرار دهید، از ویژگی box-sizing با مقدار border-box استفاده کنید. از افزودن مقدار padding و حاشیه توسط مرورگر به عرض کلی عنصر DIV جلوگیری می کند. برای بالا یا پایین بردن یک عنصر، از مقادیر منفی نیز استفاده کنید. اما در این مورد، آنها را می توان به قسمت بالا یا پایین ظرف اختصاص داد.

    نحوه وسط بلوک div با استفاده از حاشیه های خودکار

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

    هنگام توسعه برنامه‌های واکنش‌گرا از روش حاشیه خودکار استفاده کنید. نکته کلیدی این است که به ظرف مقدار عرض بر حسب ems یا درصد بدهید. کد بالا DIV را در مرکز قرار می دهد و در هر دستگاهی، از جمله تلفن های همراه، 90٪ از صفحه را اشغال می کند.

    تراز از طریق صفحه نمایش ویژگی: inline-block

    به طور پیش‌فرض، عناصر DIV به عنوان عناصر بلوک در نظر گرفته می‌شوند و دارای مقدار نمایشی بلوک هستند. برای این روش، باید این ویژگی را لغو کنید. فقط برای DIV های دارای کانتینر اصلی مناسب است:

    هر متنی

    به یک عنصر با کلاس outer-div یک ویژگی text-align با مقدار مرکز اختصاص داده می شود که متن را در داخل مرکز قرار می دهد. اما در حال حاضر، مرورگر DIV تودرتو را به عنوان یک شیء بلوک می بیند. برای اینکه ویژگی text-align کار کند، inner-div باید به صورت درون خطی در نظر گرفته شود. بنابراین در CSS برای انتخابگر inner-div، کد زیر را می نویسید:

    Inner-div (نمایشگر: inline-block;)

    شما ویژگی نمایش را از بلوک به بلوک درون خطی تغییر می دهید.

    روش تبدیل/ترجمه

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

    transform: translate(50%, 50%);

    تابع translate یک عنصر را از موقعیت فعلی به چپ/راست و بالا/پایین حرکت می‌دهد. دو مقدار در پرانتز ارسال می شود:

    • درجه حرکت افقی؛
    • درجه حرکت عمودی

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

    تبدیل: translateY(-20%);

    در برخی از راهنماها، می توانید تبدیل با پیشوندهای فروشنده را مشاهده کنید:

    webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%). transform: translate(50%, 50%);

    در سال 2018، دیگر نیازی به این کار نیست، این ویژگی توسط همه مرورگرها از جمله Edge و IE پشتیبانی می شود.

    برای اینکه DIV مورد نیاز خود را در مرکز قرار دهیم، تابع translate CSS با مقدار 50% برای محورهای عمودی و افقی نوشته می شود. این باعث می شود که مرورگر عنصر را از موقعیت فعلی خود به نصف عرض و ارتفاع خود منتقل کند. ویژگی های عرض و ارتفاع باید مشخص شوند:

    سند

    در اینجا متنی وجود دارد

    به خاطر داشته باشید که عنصری که ویژگی تبدیل به آن اعمال می شود بدون توجه به اشیاء اطراف آن حرکت می کند. از یک طرف، این راحت است، اما گاهی اوقات در حال حرکت، DIV می تواند ظرف دیگری را همپوشانی کند. بنابراین این روش مرکزیت اجزای وب غیر استاندارد تلقی می شود و تنها در مواقع ضروری مورد استفاده قرار می گیرد. دگرگونی ها مطابق با تمام قوانین CSS برای انیمیشن استفاده می شود.

    کار با طرح بندی Flexbox

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

    در مثال‌های قبلی، قبلاً با ویژگی display کار کردیم، اما آن را روی مقادیر block (block) و inline (inline-block) قرار دادیم. برای ایجاد طرح‌بندی انعطاف‌پذیر، از display: flex استفاده می‌کنیم. ابتدا به یک ظرف انعطاف پذیر نیاز داریم:

    برای تبدیل آن به یک ظرف انعطاف پذیر در جداول آبشاری، می نویسیم:

    Flex-container (نمایشگر: flex; )

    تمام اشیاء تو در تو، اما فقط بچه های مستقیم، آیتم های انعطاف پذیر خواهند بود:

    اولین
    دومین
    سوم
    چهارم

    اگر یک لیست در داخل یک ظرف انعطاف پذیر قرار داده شود، موارد موجود در لیست li آیتم های انعطاف پذیر در نظر گرفته نمی شوند. طرح بندی Flexbox فقط روی ul کار می کند:

    قوانین برای قرار دادن اقلام فلکس

    برای مدیریت اقلام انعطاف پذیر، به موارد justify-content و align-item نیاز دارید. بسته به مقادیری که مشخص می کنید، این دو ویژگی به طور خودکار اشیاء را در صورت نیاز قرار می دهند. اگر بخواهیم همه DIV های تودرتو را در مرکز قرار دهیم، justify-content: center، align-items: center و هیچ چیز دیگری را می نویسیم. مرورگر بقیه کارها را انجام خواهد داد:

    سند

    اولین
    دومین
    سوم
    چهارم

    برای قرار دادن متن روی DIV هایی که آیتم های انعطاف پذیر هستند، می توانید از ترفند استاندارد تراز کردن متن استفاده کنید. یا می‌توانید هر DIV تودرتو را به یک ظرف انعطاف‌پذیر تبدیل کنید و محتوا را با justify-content مدیریت کنید. این روش اگر حاوی محتوای متنوعی باشد، از جمله گرافیک، سایر اشیاء تودرتو، از جمله لیست های چند سطحی، بسیار منطقی تر است.

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

    تراز کردن بلوک ها با اندازه های شناخته شده

    ساده ترین راه برای استفاده از CSS تراز کردن جعبه هایی است که دارای ارتفاع از پیش تعیین شده (برای تراز عمودی) یا عرض (برای تراز افقی) هستند.

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

    گاهی اوقات نمی توانید یک عنصر را در مرکز قرار دهید، اما با ویژگی " مرزهایی به آن اضافه کنید. لایه گذاری".

    به عنوان مثال، یک تصویر 200 در 200 پیکسل وجود دارد و می خواهیم آن را در یک بلوک 240 در 300 وسط قرار دهیم. و 50 در چپ و راست.

    .example-wrapper1 ( پس زمینه : #535E73 ؛ عرض : 200 پیکسل ؛ ارتفاع : 200 پیکسل ؛ بالشتک : 20 پیکسل 50 پیکسل ؛ )

    تراز کردن بلوک‌های کاملاً موقعیت‌یافته

    اگر بلوک روی " تنظیم شود موقعیت: مطلق"، سپس می توان آن را نسبت به نزدیکترین والد با "position: relative" قرار داد. برای این، همه ویژگی ها (" بالا","درست","پایین","ترک کرد") از بلوک داخلی برای تخصیص همان مقدار، و همچنین "حاشیه: خودکار".

    *یک نکته ظریف وجود دارد: عرض (ارتفاع) بلوک داخلی + مقدار سمت چپ (راست، پایین، بالا) نباید از اندازه بلوک والد تجاوز کند. ایمن تر است که ویژگی های چپ (راست، پایین، بالا) را روی 0 (صفر) تنظیم کنید.

    .example-wrapper2 ( موقعیت: نسبی؛ ارتفاع: 250 پیکسل؛ پس‌زمینه: url(space.jpg)؛ ) 0؛ سمت راست: 0؛ حاشیه: خودکار؛ پس‌زمینه: url(king.png)؛ )

    تراز افقی

    تراز کردن با "Text-align: Center"

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

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

    .example-text (Text-align: center; padding: 10px; background: #FF90B8; )

    شایان ذکر است که این ویژگی نه تنها برای متن، بلکه برای هر عنصر درون خطی ("نمایش: درون خط") کار می کند.

    اما این متن تراز چپ است، اما در بلوکی است که نسبت به wrapper در مرکز قرار دارد.

    .example-wrapper3 (تراز متن: مرکز؛ پس‌زمینه: #FF90B8؛ .) متن درون خطی (نمایش: بلوک درون خطی؛ عرض: 40 درصد؛ لایه‌بندی: 10 پیکسل؛ تراز نوشتاری: چپ؛ پس‌زمینه: #FFE5E5؛ )

    تراز کردن بلوک ها با حاشیه

    عناصر سطح بلوک با عرض مشخص به راحتی با تنظیم آنها به صورت "Margin-left: auto; Margin-right: auto" به صورت افقی تراز می شوند. معمولاً از علامت اختصاری استفاده می شود: " حاشیه: 0 خودکار" (به جای صفر، هر مقداری می تواند وجود داشته باشد). اما برای تراز عمودی، این روش کار نخواهد کرد.

    .lama-wrapper ( ارتفاع : 200 پیکسل ؛ پس زمینه : #F1BF88 ؛ ) .lama1 ( ارتفاع : 200 پیکسل ؛ عرض : 200 پیکسل ؛ پس زمینه : url (lama.jpg ؛ حاشیه : 0 خودکار ؛ )

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

    چیدمان عمودی

    مشکلات بسیار بیشتری در تراز عمودی وجود دارد - ظاهراً این در CSS پیش بینی نشده بود. راه های مختلفی برای رسیدن به نتیجه دلخواه وجود دارد، اما همه آنها خیلی زیبا نیستند.

    تراز با ویژگی line-height

    در مواردی که فقط یک خط در بلوک وجود دارد، می توانید با اعمال "" به تراز عمودی آن برسید. ارتفاع خط" و آن را روی ارتفاع دلخواه قرار دهید. برای ایمن بودن باید "height" را نیز تنظیم کنید که مقدار آن برابر با مقدار "line-height" خواهد بود، زیرا دومی در همه مرورگرها پشتیبانی نمی شود.

    .example-wrapper4 (ارتفاع خط: 100 پیکسل؛ رنگ: #DC09C0؛ پس‌زمینه: #E5DAE1؛ ارتفاع: 100 پیکسل؛ تراز نوشتاری: مرکز؛ )

    همچنین امکان تراز کردن یک بلوک با چندین خط وجود دارد. برای انجام این کار، باید از یک بلوک بسته بندی اضافی استفاده کنید و ارتفاع خط را روی آن تنظیم کنید. بلوک داخلی می تواند چند خطی باشد، اما باید "داخلی" باشد. شما باید "Tertical-align: Middle" را روی آن اعمال کنید.

    .example-wrapper5 (ارتفاع خط: 160 پیکسل؛ ارتفاع: 160 پیکسل؛ اندازه قلم: 0؛ پس‌زمینه: #FF9B00؛ ) 1.5؛ تراز عمودی: وسط؛ پس‌زمینه: #FFFAF2؛ رنگ: #FF9B00; ;)

    بلوک wrapper باید دارای "اندازه فونت: 0" باشد. اگر اندازه فونت را روی صفر تنظیم نکنید، مرورگر چند پیکسل اضافی از خود اضافه می کند. همچنین باید اندازه فونت و ارتفاع خط را برای بلوک داخلی مشخص کنید، زیرا این ویژگی ها از والد به ارث برده می شوند.

    تراز عمودی در جداول

    ویژگی " تراز عمودی" سلول های جدول را نیز تحت تاثیر قرار می دهد. با تنظیم مقدار "middle"، محتوای داخل سلول در مرکز قرار می گیرد. البته طرح بندی جدولی امروزه قدیمی تلقی می شود، اما در موارد استثنایی می توان با تعیین "" شبیه سازی کرد. نمایش: سلول جدول".

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

    .one_product .img_wrapper (نمایش: سلول جدول؛ ارتفاع: 169 پیکسل؛ تراز عمودی: وسط؛ سرریز: پنهان؛ پس‌زمینه: #fff؛ عرض: 255 پیکسل؛ ) .one_product img (حداکثر ارتفاع: 169-10 پیکسل؛ حداکثر %؛ عرض حداقل: 140 پیکسل؛ نمایشگر: بلوک؛ حاشیه: 0 خودکار؛)

    لازم به یادآوری است که اگر عنصر دارای مجموعه "شناور" غیر از "هیچ" باشد، به هر حال به شکل بلوک (نمایش: بلوک) خواهد بود - پس باید از یک بسته بندی بلوک اضافی استفاده کنید.

    تراز کردن با یک عنصر درون خطی اضافی

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

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

    نمونه fff ؛ عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ ) .riki (نمایش: بلوک درون خطی؛ ارتفاع: 100 درصد؛ تراز عمودی: وسط؛ )

    صفحه نمایش: انعطاف پذیری و تراز

    اگر به کاربران اکسپلورر 8 اهمیت زیادی نمی‌دهید، یا آنقدر اهمیت می‌دهید که مایلید یک جاوا اسکریپت اضافی برای آن‌ها قرار دهید، می‌توانید از «display: flex» استفاده کنید. جعبه‌های فلکس به خوبی مسائل مربوط به تراز را حل می‌کنند و کافی است که «حاشیه: خودکار» را بنویسید تا محتوا را در مرکز قرار دهید.

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

    .example-wrapper7 (نمایشگر: انعطاف پذیر؛ ارتفاع: 300 پیکسل؛ پس زمینه: #AEB96A؛ ) .example-wrapper7 img (حاشیه: خودکار؛ )

    خب، این تمام چیزی است که می‌خواستم در مورد چینش CSS بنویسم. اکنون تمرکز محتوا مشکلی نخواهد داشت!

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