تراز افقی و عمودی عناصر. وسط یک بلوک با CSS

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

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

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

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

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

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

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

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

• #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

  235882 بازدید

  اغلب کار این است که بلوک را در مرکز صفحه / صفحه تراز کنید، و حتی بدون اسکریپت جاوا، بدون تنظیم اندازه های سخت یا تورفتگی های منفی، به طوری که اگر بلوک از اندازه آن بیشتر شود، نوارهای پیمایش روی والد کار کنند. نمونه های یکنواخت زیادی در شبکه وجود دارد که چگونه یک بلوک را با مرکز صفحه تراز کنید. به عنوان یک قاعده، اکثر آنها بر اساس همان اصول هستند.
  
  در زیر راه های اصلی برای حل مشکل، مزایا و معایب آنها آورده شده است. برای درک اصل مثال ها، توصیه می کنم ارتفاع / عرض پنجره 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 و font-size: 0 را برای والد مشخص می کنیم، پس از آن این استایل ها را لغو می کنیم. برای بلوک با موارد زیر - فضای سفید: عادی. در این مثال، اندازه فونت: 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.
  مثال تصویر بزرگ:

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

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

  بیایید برخی از مواردی را که از وسط عمودی جلوگیری می کند بحث کنیم.

  تراز عمودی

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

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

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

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

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

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

  فاصله خطوط یا ارتفاع خط

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

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

  در این حالت ارتفاع عنصر والد اختیاری است.

  این متن است