طرفداران

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

موارد منفی

• در IE 7 یا کمتر کار نمی کند
• بسیاری از تگ های تو در تو

روش دوم

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

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

طرفداران

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

موارد منفی

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

روش سوم

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

طرفداران

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

موارد منفی

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

روش چهارم

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

طرفداران

• بسیار ساده.

موارد منفی

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

روش پنجم

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

طرفداران

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

موارد منفی

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

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

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

مرحله 1

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

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

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

  یک شرکت

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

  عنوان صفحه

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

  سرفصل 2

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

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

  گام 2

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

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

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

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

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

  

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

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

  مرحله 3

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

  #nav ul (سبک لیست: هیچ؛ بالشتک: 0؛ حاشیه: 20 پیکسل 0 0 0؛ تورفتگی متن: 0؛) #nav li (بالشتک: 0؛ حاشیه: 3 پیکسل؛) #nav li a (نمایش: بلوک; رنگ پس‌زمینه: # e8e8e8؛ بالشتک: 7 پیکسل؛ حاشیه: 0؛ متن تزئینی: هیچ؛ رنگ: # 000؛ حاشیه پایین: 1 پیکسل توپر #bbb؛ تراز متن: راست؛) #nav li a :: after ( محتوا: "" "؛ رنگ: #aaa؛ وزن قلم: پررنگ؛ نمایشگر: درون خطی؛ شناور: سمت راست؛ حاشیه: 0 2px 0 5px؛) #nav li a: شناور، #nav li a: فوکوس (پس‌زمینه: # f8f8f8؛ حاشیه-پایین-رنگ: # 777;) #nav li a: شناور :: بعد (حاشیه: 0 0 0 7px؛ رنگ: # f93;) #nav li a: فعال (بالشتک: 8px 7px 6px 7px؛)

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

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

  چیز جالب دیگری که ما برای منو استفاده کردیم این است: قبل و: بعد از کلاس های شبه. آنها به شما اجازه می دهند هر چیزی را قبل و بعد از یک عنصر اضافه کنید. این یک راه خوب برای اضافه کردن نمادها یا نمادهایی مانند یک فلش در انتهای هر پیوند است. این ترفند در اینترنت اکسپلورر 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؛ اندازه قلم: 0.7em; color: # f03;) #logo (اندازه قلم: 2em؛ تراز متن: مرکز؛ رنگ: # 999;) #logo قوی (وزن قلم: معمولی؛) #طول آرم (نمایش: بلوک؛ اندازه قلم: 4em؛ ارتفاع خط: 0.7em؛ رنگ: # 666؛) p، h2، h3 (ارتفاع خط: 1.6em؛) a (رنگ: # f03؛)

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

  

  سازگاری

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

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

  235,882 بازدید

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

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

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

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

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

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

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

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

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

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

  روش ارتفاع خط

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

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

  HTML:

  متن مورد نظر

  CSS:

  #کودک (قد خط: 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 مثال، حاشیه های بالا و پایین را برای هر دو عنصر تنظیم می کند. برای یک عنصر تو در تو، تنظیم بالشتک برای مرکز عمودی استفاده می شود. و بالشتک عنصر والد عنصر تودرتو را در آن مرکز می کند.

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

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

  150 + 150 + 100 = 400

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

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

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

  غواصی شناور

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

  HTML:

  محتوا

  CSS:

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

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

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

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

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

  نتیجه

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

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

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

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

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

  

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

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

  ابتدا موردی را در نظر بگیرید که ابعاد یونیت های خارجی و داخلی شناخته شده... بیایید صفحه نمایش را اضافه کنیم: inline-block به عنصر داخلی، و text-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 داخلی) تراز را تنظیم کرد.

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

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

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

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

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

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

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

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

  تراز کششی

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

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

  1. موقعیت نسبی بلوک بیرونی و داخلی - مطلق را تنظیم کنید.
  2. قوانین بالا: 0 و پایین: 0 را به بلوک داخلی اضافه کنید، در نتیجه تا ارتفاع کامل بلوک بیرونی کشیده می شود.
  3. برای بالشتک عمودی بلوک داخلی روی خودکار تنظیم کنید.
  بیرونی (موقعیت: نسبی؛) داخلی (ارتفاع: 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 استفاده کنید.

  برچسب‌ها: افزودن برچسب

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

  مزایای برچسب گذاری

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

  • جدولی;
  • بلوکی.

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

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

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

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

  بلوک سازی ساختمان بر اساس برچسب ها

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

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

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

  ، یک شناور است.
  نحو ویژگی:
  شناور: چپ | راست | هیچکدام | به ارث می برند,
  جایی که:

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

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

  بلوک سمت چپ

  بلوک سمت راست

  
  

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

  
  

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

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

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

  بلوک سمت چپ

  بلوک مرکزی

  بلوک سمت راست

  
  

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

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

  
  

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

  
  

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

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

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

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

  لینک سایت ما

  
  

  در این مثال با استفاده از line display: block، لینک را با مقدار عنصر block تنظیم می کنیم. و برای اینکه کل ارتفاع بلوک div را لینک کنید، ارتفاع را 100% تنظیم کنید.

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

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

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

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

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

  
  

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

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

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

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

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

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

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

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

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

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

  .wrapper (تراز متن: مرکز؛)

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

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

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

  .wrapper (تراز کردن متن: مرکز؛ / * محتوای بلوک را در مرکز قرار دهید * /) .باکس (نمایش: بلوک درون خطی؛ / * بلوک ها را در یک ردیف به صورت افقی مرتب کنید * / حاشیه-راست: -0.25em ؛ / * تورفتگی سمت راست بین بلوک ها را بردارید * /)

  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 پیکسل؛ / * تنظیم ارتفاع بلوک * / تبدیل: ترجمه (-50٪، -50%)؛ موقعیت: مطلق؛ بالا: 50٪؛ سمت چپ: 50 درصد ;)

  اگر عنصر ابعادی نداشته باشد و خالی نباشد

  چند متن اینجا

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