چند متن اینجا

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

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

طرفداران

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

موارد منفی

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

روش دوم

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

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

#محتوا ( موقعیت: مطلق؛ بالا: 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 درصد؛ )

طرفداران

• بسیار ساده.

موارد منفی

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

روش پنجم

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

#content( ارتفاع: 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 دارای بالشتک اضافی در اطراف منوها است

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

  تراز متن در مرکز

  اغلب، برای اهداف تزئینی، لازم است که متن را به ترتیب در مرکز قرار دهید؛ CSS در این مورد به شما امکان می دهد زمان طرح بندی را کاهش دهید. پیش از این، این کار با استفاده از ویژگی‌های HTML انجام می‌شد، اما اکنون استاندارد مستلزم تراز کردن متن با استفاده از شیوه نامه است. برخلاف بلوک‌ها که باید حاشیه‌ها را تغییر دهید، در CSS، وسط متن با استفاده از یک خط انجام می‌شود:

  • text-align:center;

  این دارایی به ارث می رسد و از پدر و مادر به تمام اولاد منتقل می شود. نه تنها بر متن، بلکه بر سایر عناصر نیز تأثیر می گذارد. برای انجام این کار، آنها باید درون خطی (به عنوان مثال، span) یا درون خطی (هر بلوکی که دارای مجموعه ویژگی display: block) باشد. گزینه دوم همچنین به شما امکان می دهد عرض و ارتفاع عنصر را تغییر دهید و فرورفتگی ها را با انعطاف بیشتری تنظیم کنید.

  اغلب در صفحات، align به خود برچسب اختصاص داده می شود. این بلافاصله کد را باطل می کند، زیرا W3C ویژگی align را منسوخ کرده است. استفاده از آن در یک صفحه توصیه نمی شود.

  تراز کردن یک بلوک در مرکز

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

  • حاشیه: 0 خودکار;

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

  

  یک بلوک را به چپ یا راست تراز کنید

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

  • .left (float:left;)
  • .right(float:right)

  اگر بلوک سومی نیز وجود داشته باشد که باید در زیر دو بلوک اول قرار گیرد (مثلاً یک پاورقی)، باید ویژگی واضح به آن داده شود:

  • .left (float:left;)
  • .right(float:right)
  • پاورقی (روشن: هر دو)

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

  چیدمان عمودی

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

  • تراز بالا - .child(vertical-align:top);
  • تراز مرکزی - .child(vertical-align:middle);
  • تراز پایین - .child(vertical-align:bottom);

  نه تراز متن و نه تراز عمودی بر عناصر بلوک تأثیر نمی گذارد.

  

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

  گاهی اوقات قرار دادن یک div با استفاده از CSS می تواند کمی مشکل ایجاد کند. به عنوان مثال، هنگام استفاده از float: فرض کنید سه بلوک وجود دارد: .first، .second و .third. بلوک دوم و سوم در بلوک اول قرار دارند. عنصر با کلاس second تراز چپ و آخرین بلوک تراز راست است. پس از تسطیح، هر دو از جریان افتادند. اگر عنصر والد تنظیم ارتفاع نداشته باشد (مثلاً 30em)، دیگر به ارتفاع بلوک‌های فرزند خود کشیده نمی‌شود. برای جلوگیری از این خطا، از یک "Spacer" استفاده کنید - یک بلوک خاص که .second و .third را می بیند. کد CSS:

  • .second (float: چپ)
  • سوم (شناور:راست)
  • .clearfix(ارتفاع: 0؛ واضح: هر دو؛)

  شبه کلاس:after اغلب استفاده می شود، که همچنین به شما امکان می دهد با ایجاد یک شبه فاصله، بلوک ها را به جای خود بازگردانید (در مثال، یک div با کلاس container در inside.first و contain.left و.right قرار دارد) :

  • .left(float:left)
  • .right(float:right)
  • .container:after(content:""; display:table; clear:Both;)

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

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

  

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

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

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

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

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

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

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

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

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

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

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

  روش ارتفاع خط

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

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

  HTML:

  متن مورد نیاز

  CSS:

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

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

  وسط تصویر با استفاده از ارتفاع خط

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

  HTML:

  

  CSS:

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

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

  روش جدول CSS

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

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

  HTML:

  محتوا

  CSS:

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

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

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

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

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

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

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

  HTML:

  محتوا

  CSS:

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

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

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

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

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

  HTML:

  محتوا

  CSS:

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

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

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

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

  فضاهای مساوی بالا و پایین

  در این روش، padding برابر به صراحت در بالا و پایین عنصر والد تنظیم می شود.

  HTML:

  محتوا

  CSS:

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

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

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

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

  150 + 150 + 100 = 400

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

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

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

  شناور div

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

  HTML:

  محتوا

  CSS:

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

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

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

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

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

  نتیجه

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