تراز افقی در css. روش های تراز عمودی مرکز در CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

یک تکه متن به شما خوش آمد می گوید!

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

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

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

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

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

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

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

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

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

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

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

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

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

ویژگی CSS display به ما امکان می دهد بلوک 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 کافی است.

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

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

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

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

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

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

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

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

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

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

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

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

کمی تقلب کنیم

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

.textalign div( موقعیت: مطلق؛ بالا: 50%؛ ) .textalign span( موقعیت: نسبی؛ بالا: -50%؛ )

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

راه حل مشکل: باید یک ویژگی اضافه کنید سرریز: پنهانمسدود کردن 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 (نمایش: سلول جدول؛ تراز عمودی: وسط؛ )

تمام ترفند همین است. در صورت تمایل، می توانید ارتفاع متغیر با محوریت محتوا داشته باشید.

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

اگر هر وب سایتی را که بر اساس html ایجاد شده است برش دهید، ساختار لایه لایه خاصی را خواهید دید. علاوه بر این، ظاهر آن شبیه یک کیک لایه ای خواهد بود. اگر اینطور فکر می کنید، به احتمال زیاد برای مدت طولانی غذا نخورده اید. بنابراین ابتدا گرسنگی خود را برطرف کنید و سپس به شما خواهیم گفت که چگونه یک لایه div را در سایت خود متمرکز کنید:

مزایای طرح بندی با استفاده از برچسب

دو نوع ساختار اصلی وب سایت وجود دارد:

• جدولی;
• مسدود کردن.

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

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

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

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

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

کمک های موقعیت یابی

در چیدمان بلوک، بهتر است لایه ها را با استفاده از شیوه نامه های آبشاری قرار دهید. ویژگی اصلی CSS که مسئول layout است float است.
نحو ویژگی:
شناور: چپ | راست | هیچکدام | به ارث می برند
جایی که:

• سمت چپ – عنصر را در لبه چپ صفحه تراز کنید. جریان اطراف عناصر باقی مانده در سمت راست رخ می دهد.
• راست - تراز در سمت راست، جریان در اطراف عناصر دیگر - در سمت چپ.
• هیچ - بسته بندی مجاز نیست.
• inherit - مقدار عنصر والد را به ارث می برد.

بیایید به یک مثال سبک وزن از موقعیت یابی div ها با استفاده از این ویژگی نگاه کنیم:

#چپ ( عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: چپ؛ پس‌زمینه: rgb(255،51،102؛ ) #راست (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: راست؛ پس‌زمینه: rgb(0،255،153)؛ ) بلوک چپ بلوک سمت راست

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

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

لایه های مرکزی

در مثال بعدی از یک لایه کانتینری استفاده می کنیم که عناصر باقی مانده را در آن قرار می دهیم. با تغییر اندازه پنجره، مشکل حرکت بلوک ها نسبت به یکدیگر حل می شود. وسط قرار دادن ظرف در وسط با صفر کردن ویژگی های حاشیه برای حاشیه ها از لبه بالا و خودکار در طرفین انجام می شود (حاشیه: 0 خودکار):

#container ( عرض: 600 پیکسل؛ حاشیه: 0 خودکار؛ ) #چپ (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: چپ؛ پس‌زمینه: rgb(255،51،102؛ ) #راست (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور : چپ؛ پس‌زمینه: rgb(0,255,153); ) #مرکز (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: چپ؛ پس‌زمینه: rgb(255,0,0؛ ) بلوک چپ بلوک مرکزی بلوک سمت راست

همین مثال نشان می دهد که چگونه می توانید یک div را به صورت افقی در مرکز قرار دهید. و اگر کد بالا را کمی ویرایش کنید، می توانید به تراز عمودی بلوک ها برسید. برای این کار فقط باید طول لایه ظرف را تغییر دهید (کاهش دهید). یعنی بعد از ویرایش کلاس css آن باید به شکل زیر باشد:

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

در مثال زیر، از تعدادی ویژگی جدید css برای قرار دادن لایه‌ها در داخل یک ظرف استفاده کردیم:

#کانتینر (عرض: 450 پیکسل؛ ارتفاع: 150 پیکسل؛ حاشیه: 0 خودکار؛ رنگ پس‌زمینه: # 66CCFF؛ ) #چپ (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: rgb (255،51،102)، نمایشگر: بلوک درون خطی. تراز عمودی: وسط؛ حاشیه-چپ: 35 پیکسل؛ ) #راست (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ پس زمینه: rgb (0,255,153)؛ نمایشگر: بلوک درون خطی؛ تراز عمودی: وسط؛ حاشیه-چپ: 35 پیکسل؛ ) #مرکز (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: rgb(255،0،0؛ صفحه نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ حاشیه-چپ: 35 پیکسل؛ )

توضیح کوتاهی از خصوصیات css و مقادیر آنها که در این مثال برای قرار دادن یک div در یک div استفاده کردیم:

• نمایش: بلوک درون خطی - یک عنصر بلوک را در یک خط تراز می کند و اطمینان می دهد که در اطراف عنصر دیگری قرار می گیرد.
• vertical-align: middle – المان را در وسط نسبت به والد تراز می کند.
• margin-left - حاشیه سمت چپ را تنظیم می کند.

چگونه از یک لایه پیوند ایجاد کنیم

هر چند ممکن است عجیب به نظر برسد، این امکان پذیر است. گاهی اوقات ممکن است یک بلوک div به عنوان پیوند هنگام چیدمان انواع مختلف منوها مورد نیاز باشد. بیایید به یک مثال عملی از پیاده سازی لایه پیوند نگاه کنیم:

#layer1 (عرض: 500 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: rgb (51،255،204)، حاشیه: شیار؛ ) a (نمایش: بلوک، تراز متن: مرکز، ارتفاع: 100٪، رنگ: rgb (255،0،51) ؛) به وبسایت ما بپیوندید

در این مثال، با استفاده از نمایش خط: block، پیوند را به مقدار یک عنصر بلوک تنظیم می کنیم. و به طوری که کل ارتفاع بلوک div به یک پیوند تبدیل شود، ارتفاع را 100٪ تنظیم کنید.

پنهان کردن و نمایش عناصر بلوک

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

این به ویژه برای صفحه اصلی که هزینه تبلیغات در آن بالاترین است صادق است. بنابراین، این مشکل به وجود می‌آید که بنر تبلیغاتی دیگری را به کجا "پرتاب کنید". و در اینجا شما نمی توانید با تراز کردن div در مرکز صفحه کنار بیایید!

راه حل منطقی تر این است که مقداری بلوک را پنهان کنید. در اینجا یک مثال ساده از چنین پیاده سازی است:

#layer1( display:block; عرض: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) other ( layer1="none"; ) document.getElementById("layer1").style.display=layer1; )

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

در این مثال مکان بلوک های div به هیچ وجه تغییر نمی کند. این از یک تابع ساده جاوا اسکریپت استفاده می کند که پس از کلیک روی دکمه (رویداد onclick) مقدار ویژگی css display را تغییر می دهد.

نحو نمایش:
نمایش: بلوک | درون خطی | بلوک درون خطی | جدول درون خطی | مورد فهرست | هیچکدام | اجرا شده | جدول | شرح جدول | سلول جدول | جدول-ستون-گروه | جدول-ستون | جدول-پایی-گروه | جدول-سربرگ-گروه | ردیف جدول | جدول-ردیف-گروه

همانطور که می بینید، این ویژگی می تواند مقادیر زیادی به خود بگیرد. بنابراین بسیار مفید است و می توان از آن برای قرار دادن عناصر استفاده کرد. در یکی از مثال‌های قبلی، از یکی از مقادیر آن (inline-block) برای قرار دادن یک div در یک div استفاده کردیم.

ما از دو مقدار برای ویژگی display برای پنهان کردن و نمایش لایه استفاده کردیم.

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

حاشیه تراز افقی: خودکار

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

عنصر ( حاشیه-چپ: خودکار؛ حاشیه-راست: خودکار؛ عرض: 50٪؛ )

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

text-align: مرکز

این روش برای قرار دادن متن در یک بلوک مناسب است. text-align: center:

تراز با text-align .wrapper ( text-align: center; )

من تراز وسط هستم

موقعیت و حاشیه منفی باقی مانده است

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

تراز کردن با موقعیت .wrapper ( موقعیت: نسبی؛ ) .wrapper p ( سمت چپ: 50%؛ حاشیه: 0 0 0 -100px؛ موقعیت: مطلق؛ عرض: 200px؛ )

من تراز وسط هستم

نمایش: inline-block + text-align: center

این روش برای تراز کردن بلوک‌هایی با عرض ناشناخته مناسب است، اما به والد بسته‌بندی نیاز دارد. به عنوان مثال، می توانید یک منوی افقی را به این ترتیب وسط قرار دهید:

تراز با نمایشگر: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li (نمایش: inline-block;)

• خانه
• درباره نویسنده

تراز عمودی خط-ارتفاع

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

line-height .wrapper ( ارتفاع: 100 پیکسل؛ ارتفاع خط: 100 پیکسل؛ )

من به صورت عمودی تراز شده ام

موقعیت و حاشیه منفی افزایش می یابد

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

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

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

نمایش: سلول جدول

برای تراز عمودی، ویژگی display: table-cell به عنصر اعمال می شود که آن را مجبور می کند یک سلول جدول را شبیه سازی کند. ارتفاع و تراز عمودی آن را نیز تنظیم می کنیم: وسط. بیایید همه اینها را در یک ظرف با dislpay بپیچیم: جدول؛ ملک. :

صفحه نمایش تراز عمودی: جدول-سلول .wrapper (نمایش: جدول؛ عرض: 100٪؛ ) .cell (نمایش: سلول جدول؛ ارتفاع: 100 پیکسل؛ تراز عمودی: وسط؛ )

من به صورت عمودی تراز شده ام

تراز پویا یک عنصر در یک صفحه

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

بیایید jQuery را به صفحه وصل کنیم:

پیشنهاد می‌کنم یک تابع ساده بنویسید تا یک عنصر را در صفحه قرار دهید، بگذارید آن را alignCenter() بنامیم. خود عنصر به عنوان یک آرگومان برای تابع عمل می کند:

تابع alignCenter(elem) (// کد اینجا)

در بدنه تابع، به صورت پویا مختصات مرکز صفحه را به خصوصیات چپ و بالا CSS محاسبه و اختصاص می دهیم:

تابع alignCenter(elem) ( elem.css(( چپ: ($(window).width() - elem.width()) / 2 + "px"، بالا: ($(window).height() - elem. height()) / 2 + "px" // فراموش نکنید موقعیت را اضافه کنید: مطلق به عنصر برای ایجاد مختصات )) )

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

تابع آماده است، تنها چیزی که باقی می ماند این است که آن را به رویدادهای آمادگی DOM و تغییر اندازه پنجره متصل کنید:

$(function() ( // فراخوانی تابع مرکز زمانی که DOM آماده است alignCenter($(elem)); // هنگام تغییر اندازه پنجره، تابع را فراخوانی کنید $(window).resize(function() ( alignCenter($(elem ))))) // تابع مرکزیت عنصر alignCenter(elem) (elem.css(( // محاسبه مختصات چپ و بالا سمت چپ: ($(window).width() - elem.width()) / 2 + " px، top: ($(window).height() - elem.height()) / 2 + "px" )) )))

کاربرد فلکس باکس

ویژگی های جدید CSS3، مانند Flexbox، به تدریج رایج می شوند. این فناوری به ایجاد نشانه‌گذاری بدون استفاده از شناورها، موقعیت‌یابی و غیره کمک می‌کند. همچنین می توان از آن برای وسط عناصر استفاده کرد. به عنوان مثال، Flexbox را به element.wrapper والد اعمال کنید و محتوا را در مرکز قرار دهید:

Wrapper (نمایش: -webkit-box؛ نمایش: -moz-box؛ نمایشگر: -ms-flexbox؛ نمایش: -webkit-flex؛ نمایش: flex؛ ارتفاع: 500px؛ عرض: 500px؛ ) .wrapper .content ( حاشیه: خودکار؛ /* حاشیه: 0 خودکار؛ فقط افقی */ /* حاشیه: خودکار 0؛ فقط عمودی */ ) Lorem ipsum dolor sit amet

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

منابع مرتبط به پروژه کمک کنید

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

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

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

1.2. اگر یک بلوک در داخل بلوک دیگری تو در تو باشد و فاقد عرض/مشخص باشد: .wrapper (Text-align: center;) 1.3. اگر عرض بلوک تنظیم شده باشد و باید آن را در مرکز بلوک اصلی ثابت کنید: .wrapper (وضعیت: نسبی؛ /* موقعیت نسبی را برای بلوک والد تنظیم کنید تا بتوانیم بلوک را کاملاً داخل آن قرار دهیم * /) .box (عرض: 400 پیکسل؛ موقعیت: مطلق؛ سمت چپ: 50 درصد؛ حاشیه-چپ: -200 پیکسل؛ /*بلوک را با فاصله ای برابر با نصف عرض آن به سمت چپ تغییر دهید*/) 1.4. اگر بلوک‌ها پهنای مشخصی ندارند، می‌توانید با استفاده از یک بلوک بسته‌بندی اصلی آن‌ها را در مرکز قرار دهید: .wrapper (تراز کردن متن: مرکز؛ /*محتوای بلوک را در مرکز قرار دهید*/) .box (نمایش: بلوک درون خطی؛ / *بلوک ها را در یک ردیف به صورت افقی بچینید*/ margin-right: -0.25em؛ /*حاشیه سمت راست بین بلوک ها را بردارید*/ ) 2. تراز عمودی 2.1. اگر متن یک خط را اشغال می کند، برای مثال، برای دکمه ها و آیتم های منو: .button ( ارتفاع: 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%؛ )

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

تراز عمودی مرکز با استفاده از CSS آسان نیست. راه های زیادی وجود دارد و همه در همه مرورگرها کار نمی کنند. بیایید به 5 روش مختلف و مزایا و معایب هر کدام نگاه کنیم. مثال.

روش 1

این روش فرض می‌کند که ما برخی از عناصر را برای نمایش به عنوان جدول تنظیم می‌کنیم، سپس می‌توانیم از ویژگی vertical-align روی آن استفاده کنیم (که در عناصر مختلف متفاوت عمل می‌کند).

برخی اطلاعات مفید که باید در مرکز قرار گیرند. #wrapper( نمایش: جدول؛ ) #سلول (نمایش: سلول جدول؛ تراز عمودی: وسط؛ )

طرفداران

• محتوا می تواند به صورت پویا ارتفاع را تغییر دهد (ارتفاع در CSS تعریف نشده است).
• اگر فضای کافی برای آن وجود نداشته باشد، محتوا قطع نمی شود.

موارد منفی

• در IE 7 یا کمتر کار نمی کند
• تعداد زیادی تگ تو در تو

روش دوم

این روش از موقعیت‌یابی مطلق div استفاده می‌کند، با تنظیم بالا روی 50% و حاشیه بالا منهای نیمی از ارتفاع محتوا. این بدان معناست که شی باید دارای یک ارتفاع ثابت باشد که در سبک های CSS تعریف شده است.

از آنجایی که ارتفاع ثابت است، می توانید overflow:auto; برای یک div حاوی محتوا، بنابراین، اگر محتوا مناسب نباشد، نوارهای اسکرول ظاهر می شود.

Content Here #content ( موقعیت: مطلق؛ بالا: 50%؛ ارتفاع: 240 پیکسل؛ حاشیه بالا: -120 پیکسل؛ /* منهای نیمی از ارتفاع */ )

طرفداران

• در همه مرورگرها کار می کند.
• هیچ لانه سازی غیر ضروری وجود ندارد.

موارد منفی

• وقتی فضای کافی وجود نداشته باشد، محتوا ناپدید می شود (مثلاً div داخل بدنه است و کاربر پنجره ها را کوچکتر کرده است، در این صورت نوارهای اسکرول ظاهر نمی شوند.

روش سوم

در این روش محتوای div را با یک div دیگر می پیچیم. بیایید ارتفاع آن را روی 50٪ (ارتفاع: 50٪؛) و حاشیه پایین را به نصف ارتفاع (margin-bottom:-contentheight;) تنظیم کنیم. محتوا به صورت شناور پاک می شود و در مرکز قرار می گیرد.

در اینجا محتوای #floater است( شناور: سمت چپ؛ ارتفاع: 50%؛ حاشیه پایین: -120 پیکسل؛ ) #content( واضح: هر دو؛ ارتفاع: 240 پیکسل؛ موقعیت: نسبی؛ )

طرفداران

• در همه مرورگرها کار می کند.
• هنگامی که فضای کافی وجود ندارد (به عنوان مثال، زمانی که پنجره کاهش می یابد)، محتوا برش داده نمی شود، نوارهای پیمایش ظاهر می شوند.

موارد منفی

• من فقط می توانم به یک چیز فکر کنم: اینکه یک عنصر خالی اضافی در حال استفاده است.

روش چهارم

این روش از موقعیت: مطلق؛ خاصیت استفاده می کند. برای یک div با ابعاد ثابت (عرض و ارتفاع). سپس مختصات آن را top قرار می دهیم:0; bottom:0; ، اما از آنجایی که ارتفاع ثابتی دارد، نمی تواند کشیده شود و در مرکز قرار دارد. این بسیار شبیه به روش شناخته شده مرکز افقی یک عنصر بلوک با عرض ثابت است (حاشیه: 0 خودکار؛).

اطلاعات مهم. #content( موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ چپ: 0؛ راست: 0؛ حاشیه: خودکار؛ ارتفاع: 240 پیکسل؛ عرض: 70 درصد؛ )

طرفداران

• بسیار ساده.

موارد منفی

• در اینترنت اکسپلورر کار نمی کند
• اگر فضای کافی در ظرف نباشد، محتوا بدون نوارهای پیمایش قطع می‌شود.

روش پنجم

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

چند خط متن #محتوا (ارتفاع: 100 پیکسل؛ ارتفاع خط: 100 پیکسل؛ )

طرفداران

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

موارد منفی

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

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

اکنون می‌دانید که چگونه می‌توانید به تراز عمودی مرکز دست یابید، بیایید یک وب‌سایت ساده بسازیم که در نهایت به شکل زیر در می‌آید:

مرحله 1

همیشه خوب است که با نشانه گذاری معنایی شروع کنید. ساختار صفحه ما به صورت زیر خواهد بود:

• #floater (به مرکز محتوا)
• #مرکز (عنصر مرکزی)
  • #سمت
    • #لوگو
    • #nav (فهرست
    • #محتوا
  • #پایین (برای کپی رایت و همه چیز)

  بیایید نشانه گذاری html زیر را بنویسیم:

  یک شرکت متمرکز یک شرکت

  • صفحه اصلی
  • محصولات
  • وبلاگ
  • مخاطب
  • در باره
  عنوان صفحه

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

  سرفصل 2

  به‌جای فرآیندهای مبتنی بر مشتری، آمادگی وب سفارشی‌سازی‌شده را به طور مؤثر در آغوش بگیرید. الزامات بین پلتفرمی را در مقابل فناوری‌های پیشگیرانه رشد دهید. به راحتی خدمات متا چند رشته ای را بدون واسط های گسترده سازمانی تقویت کنید. به راحتی حوزه های موضوع استراتژیک رقابتی را با بازارهای الکترونیک متمرکز ساده کنید. انجمن‌های در کلاس جهانی با سندیکای فسفلورسنتی در مقابل بازارهای ارزش افزوده. قبل از خدمات الکترونیکی قوی، خدمات جامع را دوباره اختراع کنید.

  اعلامیه حق چاپ به اینجا می رسد

  گام 2

  اکنون ساده ترین CSS را برای قرار دادن عناصر در صفحه می نویسیم. شما باید این کد را در یک فایل style.css ذخیره کنید. این است که لینک در فایل html نوشته شده است.

  Html، بدنه ( حاشیه: 0؛ بالشتک: 0؛ ارتفاع: 100%؛ ) بدنه ( پس‌زمینه: url("page_bg.jpg") 50% 50% بدون تکرار #FC3؛ فونت-خانواده: Georgia، Times، serifs. ) #floater ( موقعیت: نسبی؛ شناور: سمت چپ؛ ارتفاع: 50%؛ حاشیه پایین: -200 پیکسل؛ عرض: 1 پیکسل؛ ) #مرکز (موقعیت: نسبی؛ واضح: سمت چپ؛ ارتفاع: 400 پیکسل؛ عرض: 80 درصد؛ حداکثر -عرض: 800 پیکسل؛ حداقل عرض: 400 پیکسل؛ حاشیه: 0 خودکار؛ پس‌زمینه: #fff؛ حاشیه: 4 پیکسل ثابت #666؛ ) #پایین (موقعیت: مطلق؛ پایین: 0؛ سمت راست: 0؛ ) #nav ( موقعیت: مطلق؛ چپ: 0؛ بالا: 0؛ پایین: 0؛ راست: 70 درصد؛ بالشتک: 20 پیکسل؛ حاشیه: 10 پیکسل؛ ) #content ( موقعیت: مطلق؛ چپ: 30 درصد؛ راست: 0؛ بالا: 0؛ پایین: 0؛ سرریز: خودکار؛ ارتفاع: 340 پیکسل؛ بالشتک: 20 پیکسل؛ حاشیه: 10 پیکسل؛ )

  قبل از تراز کردن مرکز محتوای خود، باید ارتفاع بدنه و html را روی 100% تنظیم کنیم. از آنجایی که ارتفاع بدون padding داخلی و خارجی (padding و margin) محاسبه می شود، آنها را (padding) روی 0 قرار می دهیم تا اسکرول بار وجود نداشته باشد.

  حاشیه پایین برای یک عنصر "floater" برابر است با منهای نیمی از ارتفاع محتوا (400px)، یعنی -200px.

  صفحه شما اکنون باید چیزی شبیه به این باشد:

  

  عرض عنصر #مرکز 80%. این باعث می شود سایت ما در صفحه نمایش های کوچک باریک تر و در صفحه های بزرگتر گسترده تر شود. اکثر سایت ها در مانیتورهای گسترده جدید در گوشه بالا سمت چپ، نامناسب به نظر می رسند. ویژگی‌های min-width و max-width نیز صفحه ما را محدود می‌کنند تا خیلی پهن یا خیلی باریک به نظر نرسد. اینترنت اکسپلورر از این ویژگی ها پشتیبانی نمی کند. باید آن را روی یک عرض ثابت تنظیم کنید.

  از آنجایی که عنصر #مرکز دارای مجموعه موقعیت:نسبی است، می‌توانیم از موقعیت‌یابی مطلق عناصر درون آن استفاده کنیم. سپس سرریز را تنظیم کنید: auto; برای عنصر #content تا در صورت عدم تناسب محتوا، نوارهای پیمایش ظاهر شوند.

  مرحله 3

  آخرین کاری که ما انجام می دهیم این است که یک ظاهر طراحی را اضافه کنیم تا صفحه کمی جذاب تر به نظر برسد. بیایید با منو شروع کنیم.

  #nav ul ( style-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; رنگ پس‌زمینه: #e8e8e8؛ بالشتک: 7 پیکسل؛ حاشیه: 0؛ نوشتار تزئینی: هیچ؛ رنگ: #000؛ حاشیه پایین: 1 پیکسل ثابت #bbb؛ تراز متن: راست؛ ) #nav li a::after ( محتوا: """؛ رنگ: #aaa؛ وزن قلم: پررنگ؛ نمایشگر: درون خطی؛ شناور: سمت راست؛ حاشیه: 0 2px 0 5px؛ ) #nav li a:hover، #nav li a:focus ( پس زمینه: # f8f8f8; حاشیه-پایین-رنگ: #777; ) #nav li a:hover::after ( حاشیه: 0 0 0 7px؛ رنگ: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )

  اولین کاری که برای بهتر جلوه دادن منو انجام دادیم این بود که با تنظیم ویژگی list-style:none گلوله ها را حذف کردیم و همچنین padding و padding را تنظیم کردیم، زیرا به طور پیش فرض در مرورگرهای مختلف تفاوت زیادی دارند.

  توجه داشته باشید که ما سپس مشخص کردیم که پیوندها باید به عنوان عناصر بلوک ارائه شوند. اکنون، هنگامی که نمایش داده می شوند، در سراسر عرض عنصری که در آن قرار دارند کشیده می شوند.

  چیز جالب دیگری که برای منو استفاده کردیم، کلاس های شبه:before و:after است. آنها به شما اجازه می دهند قبل و بعد از یک عنصر چیزی اضافه کنید. این یک راه خوب برای اضافه کردن نمادها یا نمادها، مانند یک فلش در انتهای هر پیوند است. این ترفند در اینترنت اکسپلورر 7 به بالا کار نمی کند.

  

  مرحله 4

  و در آخر، برای زیبایی بیشتر، تعدادی پیچ به طراحی خود اضافه می کنیم.

  #مرکز ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( font-family: Helvetica, Arial, sans- serif؛ وزن فونت: معمولی؛ رنگ: #666؛ ) h1 (رنگ: #f93؛ حاشیه پایین: 1px جامد #ddd؛ فاصله حروف: -0.05em؛ وزن فونت: پررنگ؛ حاشیه بالا: 0. padding-top: 0; ) #bottom ( padding: 10px; font-size: 0.7em; color: #f03; ) #logo (اندازه قلم: 2em؛ تراز متن: مرکز؛ رنگ: #999; ) #نشانه قوی (وزن قلم: معمولی؛ ) #عرض لوگو (نمایش: بلوک؛ اندازه قلم: 4em؛ ارتفاع خط: 0.7em؛ رنگ: #666؛ ) p، h2، h3 (ارتفاع خط: 1.6em؛ ) a (رنگ: #f03؛ )

  در این استایل ها گوشه های گرد را برای عنصر #مرکز قرار می دهیم. در CSS3، این کار توسط ویژگی border-radius انجام می شود. این هنوز در برخی از مرورگرها اجرا نشده است، به جز استفاده از پیشوندهای -moz و -webkit برای Mozilla Firefox و Safari/Webkit.

  

  سازگاری

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

  • عنصر #floater باید یک مجموعه عرض داشته باشد
  • IE 6 دارای بالشتک اضافی در اطراف منوها است

  235882 بازدید