• بلوک را در مرکز html تراز کنید. مرکز تراز DIV

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

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

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

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

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

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

    .wrapper(text-align:center;)

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

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

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

    .wrapper (تراز کردن متن: مرکز؛ /*محتوای بلوک را در مرکز قرار دهید*/) تورفتگی بین بلوک ها*/ )

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

    اگر عنصر فاقد ابعاد باشد و خالی نباشد

    چند متن اینجا

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

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

    صفحه ما از چهار بلوک تشکیل شده است: هدر (هدر)، منو (منو)، محتوا (محتوا) و پایین سایت (پانویس). برای وسط صفحه، این چهار کادر را در یک کادر اصلی قرار می دهیم:

    سربرگ سایت

    محتوا

    پایین سایت

    در مثالی از این ساختار، چندین گزینه را در نظر خواهیم گرفت.

    چیدمان و مرکز سایت لاستیک

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

    بنابراین، عرض بلوک های "هدر" و "پانویس" 100٪ از عرض صفحه خواهد بود. بگذارید عرض بلوک "menu" 30٪ باشد و بلوک "content" در کنار بلوک "menu" قرار گیرد، یعنی. باید یک حاشیه سمت چپ (حاشیه-چپ) برابر با عرض بلوک "منو" داشته باشد، یعنی. سی درصد.

    برای اینکه بلوک‌های «منو» و «محتوا» در کنار هم قرار گیرند، بیایید بلوک «منو» را شناور کنیم و آن را به لبه سمت چپ فشار دهیم. ما همچنین رنگ های پس زمینه بلوک های خود را تعیین می کنیم. حالا بیایید همه اینها را در یک شیوه نامه بنویسیم (در صفحه style.css)

    #header( background:#3e4982; عرض:100%; ارتفاع:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float : چپ؛ عرض: 30%؛ ارتفاع: 300 پیکسل؛ تراز نوشتاری: مرکز؛ رنگ: #FFFFFF؛ اندازه قلم: 18 پیکسل؛ padding-top: 10 پیکسل؛ ) #content( پس‌زمینه:#ffffff؛ حاشیه چپ: 30% ؛ ارتفاع: 300 پیکسل؛ تراز متن: مرکز؛ ) #پانویس (پس‌زمینه:#3e4982؛ شفاف: هر دو؛ عرض: 100%؛ ارتفاع: 50 پیکسل؛ تراز متن: مرکز؛ رنگ:#FFFFFF؛ اندازه قلم: 14 پیکسل؛ padding-top: 10px؛ )

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

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

    ... #menu( background:#6173cb; float:left; عرض:200px; ارتفاع:300px; ) #content( پس زمینه:#ffffff; margin-left:200px; ارتفاع:300px; ) ...

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

    اما در صورت تمایل می توانید مطمئن شوید که صفحه شما دارای تورفتگی های مساوی در سمت چپ و راست صفحه است. برای انجام این کار، باید یک استایل به بلوک "اصلی" اضافه کنید، که محفظه ای برای تمام بلوک های دیگر است:

    حالا صفحه ما به شکل زیر است:

    طرح و مرکز سایت، عرض ثابت

    در این مورد، ما باید اندازه های ثابت بلوک های خود را تنظیم کنیم:

    #main( عرض: 800 پیکسل؛ ) #هدر( پس زمینه:#3e4982؛ عرض: 800 پیکسل؛ ارتفاع: 150 پیکسل؛ تراز متن: مرکز؛ رنگ: #FFFFFF؛ اندازه قلم: 24 پیکسل؛ padding-top: 40 پیکسل؛ ) #menu ( پس‌زمینه:#6173cb؛ شناور: چپ؛ عرض: 200 پیکسل؛ ارتفاع: 300 پیکسل؛ تراز متن: مرکز؛ رنگ: #FFFFFF؛ اندازه قلم: 18 پیکسل؛ padding-top: 10 پیکسل؛ ) #content( پس‌زمینه:#ffffff; margin-left:200px; ارتفاع:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF;font- اندازه: 14 پیکسل؛ padding-top: 10px؛ )

    اکنون صفحه ما به لبه سمت چپ صفحه پین ​​شده است.

    در این صورت تراز کردن به مرکز صفحات سایت را می توان به صورت زیر انجام داد. به یاد بیاورید که صفحه ما دارای یک برچسب "body" است که می توان به آن یک عرض و مقداری padding نیز داد.

    بیایید این کار را انجام دهیم: عرض تگ "body" را روی 800 پیکسل (مانند بلوک "اصلی") و تورفتگی سمت چپ (padding-left) را روی 50٪ تنظیم کنید. سپس کل محتویات بلوک "اصلی" در سمت راست صفحه نمایش داده می شود (یعنی از وسط به راست):

    برای اینکه بلوک "اصلی" ما در وسط صفحه قرار گیرد، وسط آن باید با وسط تگ "body" مطابقت داشته باشد. آن ها بلوک "اصلی" را به اندازه نصف اندازه آن به سمت چپ حرکت دهید. عرض بلوک "اصلی" 800 پیکسل است، بنابراین باید ویژگی "margin-left:-400px" را روی آن تنظیم کنید. بله، این ویژگی می تواند مقادیر منفی بگیرد که در این صورت حاشیه سمت چپ کاهش می یابد (یعنی به سمت چپ منتقل می شود). و این دقیقا همان چیزی است که ما نیاز داریم.

    اکنون شیوه نامه به شکل زیر است:

    body( عرض: 800 پیکسل؛ بالشتک چپ: 50 درصد؛ ) #main( عرض: 800 پیکسل؛ حاشیه سمت چپ: -400 پیکسل؛ ) #header( پس زمینه:#3e4982؛ عرض: 800 پیکسل؛ ارتفاع: 150 پیکسل؛ تراز نوشتاری: مرکز ؛ رنگ:#FFFFFF؛ اندازه قلم: 24 پیکسل؛ padding-top: 40px؛ ) #menu( پس زمینه:#6173cb؛ شناور: چپ؛ عرض: 200 پیکسل؛ ارتفاع: 300 پیکسل؛ تراز نوشتاری: مرکز؛ رنگ: #FFFFFF; اندازه قلم: 18 پیکسل؛ padding-top: 10px؛ ) #content( پس زمینه:#ffffff؛ حاشیه چپ: 200 پیکسل؛ ارتفاع: 300 پیکسل؛ متن-تراز: مرکز؛ ) #footer( پس زمینه:#3e4982; clear:both; عرض: 800 پیکسل؛ ارتفاع: 50 پیکسل؛ تراز نوشتاری: مرکز؛ رنگ: #FFFFFF؛ اندازه قلم: 14 پیکسل؛ بالشتک: 10 پیکسل؛ )

    و صفحه ما در مرورگر دقیقا در وسط قرار دارد:

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

    در کارهای خلاقانه خود موفق باشید!

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

    Tab. 1. راه های تراز کردن متن
    تراز چپ تراز سمت راست تراز وسط توجیه
    Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

    Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

    تگ پاراگراف معمولاً برای تنظیم تراز متن استفاده می شود.

    با ویژگی align که روش تراز را مشخص می کند. همچنین تراز کردن یک بلوک متن با استفاده از برچسب مجاز است

    با همان ویژگی align، همانطور که در جدول 1 نشان داده شده است. 2.

    Tab. 2. تراز کردن متن با پارامتر align
    کد HTML شرح
    یک پاراگراف جدید از متن اضافه می کند که به طور پیش فرض توجیه شده است. تورفتگی های عمودی کوچک به طور خودکار قبل و بعد از پاراگراف اضافه می شوند.

    متن

    		 تراز وسط.

    متن

    		 تراز چپ.

    متن

    متن

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

    تراز چپ عناصر به طور پیش فرض تنظیم شده است، بنابراین نیازی به تعیین مجدد آن نیست. بنابراین align="left" را می توان حذف کرد.

    تفاوت بین پاراگراف (برچسب

    ) و تگ کنید

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

    مشخصه align کاملاً همه کاره است و می تواند نه تنها برای متن بدنه، بلکه برای سرفصل هایی مانند

    . مثال 1 نحوه تنظیم تراز را در چنین حالتی نشان می دهد.

    مثال 1: ترازبندی متن

    تراز متن

    چگونه یک شیر را بگیریم؟

    روش شمارش

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

    روش دوگانگی

    کویر را به دو نیم تقسیم می کنیم. در یک قسمت شیر ​​است، در قسمت دیگر هیچ. نیمه ای که شیر در آن قرار دارد را می گیریم و دوباره آن را به دو نیم تقسیم می کنیم. پس تکرار می کنیم تا شیر صید شود.

    نتیجه مثال در شکل نشان داده شده است. 1.

    برنج. 1. متن را به راست و چپ تراز کنید

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

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

    تراز کردن بلوک ها با اندازه های شناخته شده

    ساده ترین راه برای استفاده از CSS تراز کردن جعبه هایی است که دارای ارتفاع از پیش تعیین شده (برای تراز عمودی) یا عرض (برای تراز افقی) هستند.

    تراز با بالشتک

    گاهی اوقات نمی توانید یک عنصر را در مرکز قرار دهید، اما با ویژگی " مرزهایی به آن اضافه کنید. لایه گذاری".

    به عنوان مثال، یک تصویر 200 در 200 پیکسل وجود دارد، و می خواهیم آن را در یک بلوک 240 در 300 وسط قرار دهیم. 50 در چپ و راست.

    .example-wrapper1 ( پس زمینه : #535E73 ؛ عرض : 200 پیکسل ؛ ارتفاع : 200 پیکسل ؛ بالشتک : 20 پیکسل 50 پیکسل ؛ )

    تراز کردن بلوک‌های کاملاً موقعیت‌یافته

    اگر بلوک روی " تنظیم شود موقعیت: مطلق"، سپس می توان آن را نسبت به نزدیکترین والد با "position: relative" قرار داد. برای این، همه ویژگی ها (" بالا","درست","پایین","ترک کرد") از بلوک داخلی برای تخصیص همان مقدار، و همچنین "حاشیه: خودکار".

    *یک نکته ظریف وجود دارد: عرض (ارتفاع) بلوک داخلی + مقدار سمت چپ (راست، پایین، بالا) نباید از اندازه بلوک والد تجاوز کند. ایمن تر است که ویژگی های چپ (راست، پایین، بالا) را روی 0 (صفر) تنظیم کنید.

    .example-wrapper2 ( موقعیت: نسبی؛ ارتفاع: 250 پیکسل؛ پس‌زمینه: url(space.jpg)؛ ) 0؛ سمت راست: 0؛ حاشیه: خودکار؛ پس‌زمینه: url(king.png)؛ )

    تراز افقی

    تراز کردن با "Text-align: Center"

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

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

    .example-text (Text-align: center; padding: 10px; background: #FF90B8; )

    شایان ذکر است که این ویژگی نه تنها برای متن، بلکه برای هر عنصر درون خطی ("نمایش: درون خط") کار می کند.

    اما این متن تراز چپ است، اما در بلوکی است که نسبت به wrapper در مرکز قرار دارد.

    .example-wrapper3 (تراز متن: مرکز؛ پس‌زمینه: #FF90B8؛ .) متن درون خطی (نمایش: بلوک درون خطی؛ عرض: 40 درصد؛ لایه‌بندی: 10 پیکسل؛ تراز نوشتاری: چپ؛ پس‌زمینه: #FFE5E5؛ )

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

    عناصر سطح بلوک با عرض مشخص به راحتی با تنظیم آنها به صورت "Margin-left: auto; Margin-right: auto" به صورت افقی تراز می شوند. معمولاً از علامت اختصاری استفاده می شود: " حاشیه: 0 خودکار" (به جای صفر، هر مقداری می تواند وجود داشته باشد). اما برای تراز عمودی، این روش کار نخواهد کرد.

    .lama-wrapper ( ارتفاع : 200 پیکسل ؛ پس زمینه : #F1BF88 ؛ ) .lama1 ( ارتفاع : 200 پیکسل ؛ عرض : 200 پیکسل ؛ پس زمینه : url (lama.jpg ؛ حاشیه : 0 خودکار ؛ )

    به این ترتیب ارزش تراز کردن همه بلوک ها را دارد، در صورت امکان (در مواردی که موقعیت ثابت یا مطلق مورد نیاز نیست) - منطقی ترین و کافی ترین است. در حالی که این امر بدیهی به نظر می رسد، من گهگاه نمونه های ترسناک با تورفتگی های منفی را دیده ام، بنابراین فکر کردم که توضیح بدهم.

    چیدمان عمودی

    مشکلات بسیار بیشتری در تراز عمودی وجود دارد - ظاهراً این در CSS پیش بینی نشده بود. راه های مختلفی برای رسیدن به نتیجه دلخواه وجود دارد، اما همه آنها خیلی زیبا نیستند.

    تراز با ویژگی line-height

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

    .example-wrapper4 (ارتفاع خط: 100 پیکسل؛ رنگ: #DC09C0؛ پس‌زمینه: #E5DAE1؛ ارتفاع: 100 پیکسل؛ تراز نوشتاری: مرکز؛ )

    همچنین امکان تراز کردن یک بلوک با چندین خط وجود دارد. برای انجام این کار، باید از یک بلوک بسته بندی اضافی استفاده کنید و ارتفاع خط را روی آن تنظیم کنید. بلوک داخلی می تواند چند خطی باشد، اما باید "داخلی" باشد. شما باید "Tertical-align: Middle" را روی آن اعمال کنید.

    .example-wrapper5 (ارتفاع خط: 160 پیکسل؛ ارتفاع: 160 پیکسل؛ اندازه قلم: 0؛ پس‌زمینه: #FF9B00؛ ) 1.5؛ تراز عمودی: وسط؛ پس‌زمینه: #FFFAF2؛ رنگ: #FF9B00; ;)

    بلوک wrapper باید دارای "اندازه فونت: 0" باشد. اگر اندازه فونت را روی صفر تنظیم نکنید، مرورگر چند پیکسل اضافی از خود اضافه می کند. همچنین باید اندازه فونت و ارتفاع خط را برای بلوک داخلی مشخص کنید، زیرا این ویژگی ها از والد به ارث برده می شوند.

    تراز عمودی در جداول

    ویژگی " تراز عمودی" سلول های جدول را نیز تحت تاثیر قرار می دهد. با تنظیم مقدار "middle"، محتوای داخل سلول در مرکز قرار می گیرد. البته طرح بندی جدولی امروزه قدیمی تلقی می شود، اما در موارد استثنایی می توان با تعیین "" شبیه سازی کرد. نمایش: سلول جدول".

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

    .one_product .img_wrapper (نمایش: سلول جدول؛ ارتفاع: 169 پیکسل؛ تراز عمودی: وسط؛ سرریز: پنهان؛ پس‌زمینه: #fff؛ عرض: 255 پیکسل؛ ) .one_product img (حداکثر ارتفاع: 169-10 پیکسل؛ حداکثر %؛ عرض حداقل: 140 پیکسل؛ نمایشگر: بلوک؛ حاشیه: 0 خودکار؛)

    لازم به یادآوری است که اگر عنصر دارای مجموعه "شناور" غیر از "هیچ" باشد، به هر حال به شکل بلوک (نمایش: بلوک) خواهد بود - پس باید از یک بسته بندی بلوک اضافی استفاده کنید.

    تراز کردن با یک عنصر درون خطی اضافی

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

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

    نمونه fff ؛ عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ ) .riki (نمایش: بلوک درون خطی؛ ارتفاع: 100 درصد؛ تراز عمودی: وسط؛ )

    صفحه نمایش: انعطاف پذیری و تراز

    اگر به کاربران اکسپلورر 8 اهمیت زیادی نمی‌دهید، یا آنقدر اهمیت می‌دهید که می‌خواهید یک جاوا اسکریپت اضافی برای آن‌ها قرار دهید، می‌توانید از «display: flex» استفاده کنید. جعبه‌های فلکس به خوبی مسائل مربوط به تراز را حل می‌کنند و کافی است که «حاشیه: خودکار» را بنویسید تا محتوا را در مرکز قرار دهید.

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

    .example-wrapper7 (نمایشگر: انعطاف پذیر؛ ارتفاع: 300 پیکسل؛ پس زمینه: #AEB96A؛ ) .example-wrapper7 img (حاشیه: خودکار؛ )

    خب، این تمام چیزی است که می‌خواستم در مورد چینش CSS بنویسم. اکنون تمرکز محتوا مشکلی نخواهد داشت!

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

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

    مثال 4.1. مرکز کردن با تگ CENTER


    این متن در مرکز پنجره مرورگر و زیر آن تراز می شود
    نقاشی در سمت راست

    به طور رسمی، CENTER فقط باید به عنوان یک پارامتر برای سایر تگ های بلوک (P، PRE، و دیگران) استفاده شود. با این حال، در مرورگر Netscape Navigator 2.0، CENTER به عنوان یک برچسب مستقل معرفی شد. این افزودنی برای حذف بالشتک عمودی اضافی که هنگام استفاده از تگ های بلوک ظاهر می شود، در نظر گرفته شده است. اگر به جای تگ CENTER متن داخل یک پاراگراف قرار گیرد (

    ) ، یک بالشتک عمودی اضافی بین خط افقی و این متن ظاهر می شود.

    CENTER بخشی از مشخصات HTML نیست. در HTML "رسمی"، قالب بندی مانند تراز متن باید از طریق ویژگی های برچسب انجام شود (به عنوان مثال،

    ) یا استفاده از استایل ها. با این وجود، این برچسب حق وجود را به دست آورد. با این حال، از زمان انتشار مشخصات HTML 4 W3، کنسرسیوم توصیه کرده است که از استفاده از تگ CENTER اجتناب شود و عنصر

    ...
    همانطور که در مثال 4.2 نشان داده شده است.

    مثال 4.2. مرکز کردن با تگ DIV



    تراز کردن متن در مرکز با تگ DIV

    یکی دیگر از راه های مرکز، استفاده از استایل ها است. سبک‌ها دستورالعمل‌هایی هستند که به شما امکان می‌دهند ویژگی‌های قالب‌بندی مانند فونت، رنگ، تراز و غیره را کنترل کنید. نمونه‌ای از تعریف مجدد تگ P در مرکز متن.

    مثال 4.3. مرکز کردن با سبک ها






    حالا وقتی از تگ P با موارد بالا استفاده می کنید
    سبک، متن پاراگراف در مرکز پنجره مرورگر تراز می شود



    بیشتر بخوانید: