روشی برای نمایش به عنوان جدول، پس از آن می‌توانیم از ویژگی 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 نیز صفحه ما را محدود می‌کنند تا خیلی پهن یا خیلی باریک به نظر نرسد. اینترنت اکسپلورر از این ویژگی ها پشتیبانی نمی کند. باید روی یک عرض ثابت تنظیم شود.

  از آنجایی که عنصر #centered روی position:relative تنظیم شده است، می‌توانیم از موقعیت مطلق عناصر درون آن استفاده کنیم. سپس سرریز را تنظیم کنید: 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

  235881 بازدید

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

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

  

  مرکز افقی با متن تراز

  گاهی اوقات، ساده ترین راه حل بهترین است:

  Div.center ( تراز متن: مرکز؛ پس‌زمینه: hsl(0، 100، 97%)؛ ) div.center img (عرض: 33%؛ ارتفاع: خودکار؛ )

  در اینجا هیچ مرکز عمودی وجود ندارد: برای این کار باید ویژگی margin-top و margin-bottom را به div اضافه کنید.

  وسط با حاشیه: خودکار

  

  راه حل دیگری برای مرکز افقی:

  Div.center ( پس‌زمینه: hsl(60، 100، 97%)؛ ) div.center img (نمایش: بلوک؛ عرض: 33%؛ ارتفاع: خودکار؛ حاشیه: 0 خودکار؛ )

  توجه داشته باشید که برای این روش باید ویژگی display: block را تنظیم کنید.

  وسط با سلول جدول

  

  با استفاده از display: table-cell می‌توانیم اطمینان حاصل کنیم که عنصر به صورت عمودی و افقی در مرکز قرار دارد. اما در اینجا باید تصویر را در یک عنصر div دیگری قرار دهیم.

  

  تراز وسط (نمایش: جدول؛ پس‌زمینه: hsl(120، 100، 97%)؛ عرض: 100%؛ . ) .center-core img (عرض: 33%؛ ارتفاع: خودکار؛ )

  برای اینکه همه چیز به درستی کار کند، div باید روی عرض: 100٪ تنظیم شود. برای وسط المان به صورت عمودی، از روش های استاندارد با تنظیم ارتفاع استفاده می کنیم. در همه جا کار می کند، از جمله IE8+.

  مرکزیت مطلق

  

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

  تراز مطلق (موقعیت: نسبی؛ حداقل ارتفاع: 500 پیکسل؛ پس‌زمینه: hsl(200، 100، 97 درصد؛ ) : خودکار؛ حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ راست: 0؛ )

  وسط با ترجمه

  

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

  مرکز ( پس‌زمینه: hsl(180، 100، 97%)؛ موقعیت: نسبی؛ حداقل ارتفاع: 500 پیکسل؛ ) .center img ( موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50%؛ تبدیل: ترجمه ٪ -50٪؛ عرض: 30٪؛ ارتفاع: خودکار؛ )

  چندین نقطه منفی وجود دارد:

  • ویژگی تبدیل CSS به پیشوندهای مرورگر نیاز دارد
  • در نسخه های قدیمی IE (8 و پایین تر) کار نمی کند
  • ظرف بیرونی باید ارتفاع داشته باشد.
  • اگر متنی در داخل ظرف وجود دارد، ممکن است کمی تار باشد.

  وسط با نمای نمایشگر منعطف

  

  احتمالا ساده ترین گزینه.

  مرکز ( پس‌زمینه: hsl(240، 100، 97%)؛ نمایشگر: انعطاف‌پذیر؛ توجیه محتوا: مرکز؛ تراز کردن موارد: مرکز؛ .center img (عرض: 30%؛ ارتفاع: خودکار؛ )

  در همه نسخه‌های اینترنت اکسپلورر کار نمی‌کند (اگرچه می‌توانید با استفاده از نمایشگر: جدول-سلول علاوه بر این، در امنیت باشید). CSS کامل:

  مرکز (پس‌زمینه: hsl(240، 100، 97%)؛ نمایشگر: -webkit-box؛ /* Safari، iOS 6 و نسخه‌های قبلی؛ Android، WebKit قدیمی */ نمایشگر: -moz-box؛ /* Firefox (می و شکست) */ نمایشگر: -ms-flexbox؛ /* IE 10 */ نمایشگر: -webkit-flex؛ /* Chrome 21+ */ نمایشگر: flex؛ /* Opera 12.1+، Firefox 22+ */ -webkit- box -align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-item: center; align-اقلام: مرکز؛ -webkit-box-pack: مرکز؛ -moz - box-pack: مرکز؛ -ms-flex-pack: مرکز؛ -webkit-justify-content: center؛ justify-content: مرکز؛ )

  مرکز کردن با کالک

  

  در برخی موارد، این روش چند منظوره تر از استفاده از flexbox است:

  مرکز ( پس‌زمینه: hsl(300، 100، 97%)؛ حداقل ارتفاع: 600 پیکسل؛ موقعیت: نسبی؛ ) 20٪؛ سمت چپ: کالک (50٪ - 20٪)؛ )

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

  بالا: کالک (50٪ - (40٪ / 2))؛ سمت چپ: کالک (50٪ - (40٪ / 2))؛

  در عمل، اگر ابعاد عناصر را بدانیم، ممکن است متوجه شوید که این روش به خوبی کار می کند:

  تصویر مرکزی (عرض: 500 پیکسل؛ ارتفاع: 500 پیکسل؛ موقعیت: مطلق؛ بالا: calc (50% - (300 پیکسل / 2))؛ سمت چپ: calc(50% - (300 پیکسل - 2))؛ )

  این روش توسط فایرفاکس پشتیبانی می شود، از نسخه 4 شروع می شود، شما باید پیشوندهای مرورگر را ثبت کنید. در IE 8 کار نمی کند. کد کامل:

  تصویر مرکزی (عرض: 40%؛ ارتفاع: خودکار؛ موقعیت: مطلق؛ بالا: -webkit-calc(50% - 20%)؛ سمت چپ: -webkit-calc(50% - 20%)؛ بالا: -moz-calc (50% - 20%)؛ سمت چپ: -moz-calc(50% - 20%)؛ بالا: کالک (50% - 20%)؛ سمت چپ: کالک (50% - 20%)؛ )

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

• css،
• HTML

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

بله، برای تراز عمودی در CSS یک ویژگی خاص vertical-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 داخلی) / 2 تنظیم کرد.

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

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

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

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

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

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

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

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

تراز کششی

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

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

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

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

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

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

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

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

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

تراز با تبدیل

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

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

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

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

تراز با Flexbox

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

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

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

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

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

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

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

در زیر راه های اصلی برای حل مشکل، مزایا و معایب آنها آورده شده است. برای درک اصل مثال ها، توصیه می کنم ارتفاع / عرض پنجره Result را در مثال های پیوندهای نشان داده شده کاهش دهید.

گزینه 1. بالشتک منفی.

تثبیت موقعیت مسدود کردنویژگی های بالا و چپ 50% و با دانستن ارتفاع و عرض بلوک از قبل، یک حاشیه منفی را تعیین کنید که برابر با نصف اندازه است. مسدود کردن. یک نقطه ضعف بزرگ این گزینه این است که شما باید تورفتگی های منفی را بشمارید. همچنین مسدود کردندر محیط نوارهای پیمایش کاملاً درست رفتار نمی کند - به دلیل داشتن تورفتگی های منفی به سادگی قطع می شود.


والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ سرریز: خودکار؛ ) .block (عرض: 250 پیکسل؛ ارتفاع: 250 پیکسل؛ موقعیت: مطلق؛ بالا: 50%؛ سمت چپ : 50%؛ حاشیه: -125px 0 0 -125px؛ img (حداکثر عرض: 100%؛ ارتفاع: خودکار؛ نمایشگر: بلوک؛ حاشیه: 0 خودکار؛ حاشیه: هیچکدام؛ ))

گزینه 2: تورفتگی خودکار.

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


والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ سرریز: خودکار؛ ) .block (عرض: 250 پیکسل؛ ارتفاع: 250 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ سمت راست: 0؛ پایین: 0؛ سمت چپ: 0؛ حاشیه: خودکار؛ img (حداکثر عرض: 100%؛ ارتفاع: خودکار؛ نمایشگر: بلوک؛ حاشیه: 0 خودکار؛ حاشیه: هیچکدام؛ ))

گزینه 3. جدول.

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


والد ( عرض: 100%؛ ارتفاع: 100%؛ نمایش: جدول؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ > .inner (نمایش: سلول جدول؛ تراز متن: مرکز؛ تراز عمودی: وسط؛ ) ) .block (نمایش: بلوک درون خطی؛ img (نمایش: بلوک؛ حاشیه: هیچکدام؛ ))

برای افزودن یک اسکرول به این مثال، باید یک عنصر دیگر به ساختار اضافه کنید.
مثال: jsfiddle.net/serdidg/fk5nqh52/3.

گزینه 4. شبه عنصر.

این گزینه فاقد تمام مشکلات ذکر شده در روش های قبلی است و همچنین وظایف اصلی را حل می کند. نکته این است که داشته باشید والدینسبک ها را تنظیم کنید عنصر شبهقبل، یعنی 100٪ ارتفاع، تراز وسط و مدل جعبه درونی. همینطور مسدود کردنمدل بلوک درون خطی، تراز مرکزی را قرار دهید. به مسدود کردنزیر نیفتاد عنصر شبهزمانی که ابعاد اولی بزرگتر از والدین، مشخص كردن والدینفضای سفید: nowrap و اندازه فونت: 0 که بعد از آن y مسدود کردناین سبک ها را با موارد زیر لغو کنید - فضای سفید: عادی. در این مثال، اندازه فونت: 0 برای حذف فضای بین آن لازم است والدینو مسدود کردندر ارتباط با قالب بندی کد شکاف را می توان به روش های دیگری از بین برد، اما بهتر است به سادگی اجازه ندهید.


والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ سرریز: خودکار؛ فضای سفید: nowrap؛ تراز متن: مرکز؛ اندازه قلم: 0؛ &:قبل از ( ارتفاع: 100%؛ صفحه نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ محتوا: ""؛ ) ) .block (نمایش: بلوک درون خطی؛ فضای سفید: عادی؛ تراز عمودی: وسط؛ تراز متن: چپ ؛ img (نمایش: بلوک؛ حاشیه: هیچ؛ ))

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

والد ( موقعیت: ثابت؛ بالا: 0؛ راست: 0؛ پایین: 0؛ چپ: 0؛ سرریز: خودکار؛ فضای سفید: nowrap؛ تراز متن: مرکز؛ اندازه قلم: 0؛ &: قبل (ارتفاع: 100%؛ نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ محتوا: ""؛ ) ) .block (نمایش: بلوک درون خطی؛ فضای سفید: عادی؛ تراز عمودی: وسط؛ تراز نوشتاری: چپ؛ img (نمایش: بلوک؛ حاشیه: هیچ؛ ) )

گزینه 5. Flexbox.

یکی از ساده ترین و زیباترین راه ها استفاده از فلکس باکس است. این نیازی به حرکات غیر ضروری بدن ندارد، ماهیت آنچه را که اتفاق می افتد کاملاً واضح توصیف می کند و انعطاف پذیری بالایی دارد. تنها چیزی که هنگام انتخاب این روش باید به خاطر داشته باشید پشتیبانی از IE از نسخه 10 فراگیر است. caniuse.com/#feat=flexbox


والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: ثابت؛ بالا: 0؛ چپ: 0؛ نمایشگر: انعطاف‌پذیر؛ تراز موارد: مرکز؛ تراز کردن محتوای: مرکز؛ توجیه محتوا: مرکز؛ سرریز: خودکار ) .block ( پس زمینه: #60a839; img (نمایش: بلوک؛ حاشیه: هیچ، ))

گزینه 6. تبدیل.

اگر توسط ساختار محدود شده باشیم، مناسب است و راهی برای دستکاری عنصر والد وجود ندارد، اما بلوک باید به نحوی تراز شود. تابع translate() css به کمک خواهد آمد. مقدار 50٪ موقعیت مطلق، گوشه سمت چپ بالای جعبه را دقیقاً در مرکز قرار می دهد، سپس یک مقدار ترجمه منفی، کادر را نسبت به ابعاد خودش جابجا می کند. لطفاً توجه داشته باشید که اثرات منفی ممکن است به شکل لبه‌های تار یا سبک قلم ظاهر شوند. همچنین، روش مشابهی می‌تواند منجر به مشکلاتی در محاسبه موقعیت بلوک با استفاده از java-script a. بلوک می تواند کمک کند: margin-right: -50%؛ .


والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: ثابت؛ بالا: 0؛ سمت چپ: 0؛ سرریز: خودکار؛ ) .block ( موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50%؛ تبدیل: ترجمه( -50٪، -50٪؛ img (نمایش: بلوک؛ ))

گزینه 7. دکمه.

گزینه کاربر کجا مسدود کردندر یک برچسب دکمه پیچیده شده است. دکمه این قابلیت را دارد که هر چیزی را که در داخل آن قرار دارد، یعنی عناصر مدل inline و block-line (inline-block) را در مرکز قرار دهد. من آن را در عمل توصیه نمی کنم.



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

جایزه

با استفاده از ایده گزینه 4، می توانید حاشیه برای آن تعیین کنید مسدود کردن، و در عین حال دومی به اندازه کافی در محیط اسکرول بارها نمایش داده می شود.
مثال: jsfiddle.net/serdidg/nfqg9rza/2.

همچنین می توانید تصویر را در مرکز، و اگر تصویر بزرگتر باشد، تراز کنید والدین، آن را به اندازه اندازه گیری کنید والدین.
مثال: jsfiddle.net/serdidg/nfqg9rza/3.
مثال تصویر بزرگ: