طرفداران

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

منفی ها

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

روش دوم

این روش از مطلق استفاده می کند موقعیت یابی div-a، که بالای آن روی 50% تنظیم شده است و حاشیه بالا (margin-top) منهای نیمی از ارتفاع محتوا است. این بدان معناست که شی باید دارای یک ارتفاع ثابت باشد که در سبک های CSS تعریف شده است.

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

طرفداران

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

منفی ها

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

روش سوم

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

طرفداران

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

منفی ها

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

روش چهارم

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

طرفداران

• بسیار ساده.

منفی ها

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

روش پنجم

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

طرفداران

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

منفی ها

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

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

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

مرحله 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 درصد؛ حداکثر -width: 800px; min. پایین: 0 بالشتک: #محتوا;

  قبل از تراز کردن مرکز محتوای خود، باید ارتفاع بدنه و 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 حاشیه: 1px یکپارچه: محتوا: """؛ font-weight: bold; float: 0 0 5px; f8f8f8; : #777;

  اولین کاری که برای بهتر جلوه دادن منو انجام دادیم این بود که با تنظیم ویژگی 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- فونت-وزن: رنگ عادی: #666 h1 (رنگ: #f93; حاشیه-پایین: 1px جامد #ddd؛ فونت-وزن: پررنگ؛ حاشیه-بالا: 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 برای موزیلا فایرفاکسو Safari/Webkit.

  

  سازگاری

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

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

  237154 بازدید

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

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

  روزی روزگاری یک برچسب وجود داشت

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

  شما می توانید یک عکس اضافه کنید، همچنین به مرکز تراز شده است، اجازه دهید به آن نیز برویم خط بعدیبا استفاده از برچسب
  :

  
  

  عنوان سطح 1، تراز وسط

  
  
  
  

  یک تگ بود

  ، که قبلاً منسوخ شده است، علاوه بر این، برخلاف انتظار شما از برچسب ها است و به سادگی وجود ندارد بیایید بگوییم به طور پیش فرض تراز چپ، تراز وسط با استفاده از برچسب ، اما در مورد مناسب چطور؟

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

  . یعنی هر چیزی که باید در یک ظرف خاص قرار گیرد در داخل تگ قرار می گیرد

  . و این تگ قبلاً دارای ویژگی " تراز کردن"، که مقدار آن موقعیت این ظرف را تعیین می کند. سه مقدار وجود دارد: " ترک کرد", "مرکز", "درست". به طور پیش فرض، این است " ترک کردبا این حال، من فکر می کنم که این شما را شگفت زده نمی کند.

  همین الان هم بنویسیم کد HTML، اما با استفاده از ظروف، علاوه بر این، اجازه دهید نه به مرکز، بلکه به سمت راست تراز کنیم.

  
  

  
  
  
  

  همانطور که می بینید، همه چیز کار می کند. من به شما توصیه می کنم که مقادیر ویژگی را نیز تغییر دهید " تراز کردنبرای بررسی انواع دیگر تراز محتوای کانتینر.

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

  در حال حاضر، صفحه شما باید به شکل زیر باشد:

  
  
  
  
  

  
  

  عنوان سطح 1، تراز وسط

  
  
  
  
  

  
  

  عنوان سطح 1، تراز راست

  
  
  
  

  
  
  

  با احترام، میخائیل روساکوف.

  P.S.اگر می خواهید بیشتر بدانید HTMLبعد به مال من نگاه کن دوره رایگانبا نمونه ای از ایجاد یک وب سایت در HTML:

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

  گزینه 1: تورفتگی منفی.

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

  

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

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

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

  

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

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

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

  

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

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

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

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

  

  والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ سرریز: خودکار؛ فضای سفید: nowrap؛ تراز متن: مرکز؛ اندازه قلم: 0؛ &:قبل از ( ارتفاع: 100% نمایشگر: inline-align: "";

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

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

  گزینه 5. Flexbox.

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

  

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

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

  اگر توسط ساختار محدود شده باشیم و راهی برای دستکاری وجود نداشته باشد مناسب است عنصر والد، اما بلوک باید به نحوی تراز شود. به کمک خواهد آمد تابع cssترجمه کردن() . در موقعیت 50٪ مطلق، گوشه سمت چپ بالای بلوک دقیقاً در مرکز قرار می گیرد معنی منفی translate بلوک را نسبت به ابعاد خودش جابجا می کند. لطفاً توجه داشته باشید که اثرات منفی ممکن است به شکل لبه‌های تار یا سبک قلم ظاهر شوند. همچنین روش مشابهمی تواند منجر به مشکلاتی در محاسبه موقعیت بلوک با استفاده از java-script شود ویژگی های cssچپ را می توان با قانون مشخص شده برای بلوک کمک کرد: 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.
  مثال با یک تصویر بزرگ: