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

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

طرفداران

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

موارد منفی

• در IE 7 یا کمتر کار نمی کند
• بسیاری از تگ های تو در تو

روش دوم

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

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

#محتوا (موقعیت: مطلق؛ بالا: 50٪؛ ارتفاع: 240 پیکسل؛ حاشیه بالا: -120 پیکسل؛ / * منهای نیمی از ارتفاع * /)

طرفداران

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

موارد منفی

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

روش سوم

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

#floater (شناور: سمت چپ؛ ارتفاع: 50%؛ حاشیه پایین: -120 پیکسل؛) #محتوا (واضح: هر دو؛ ارتفاع: 240 پیکسل؛ موقعیت: نسبی؛)

طرفداران

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

موارد منفی

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

روش چهارم

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

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

طرفداران

• بسیار ساده.

موارد منفی

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

روش پنجم

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

#محتوا (ارتفاع: 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، سری‌ها. ) #floater (موقعیت: نسبی؛ شناور: چپ؛ ارتفاع: 50%؛ حاشیه پایین: -200 پیکسل؛ عرض: 1 پیکسل؛) #مرکز (موقعیت: نسبی؛ واضح: سمت چپ؛ ارتفاع: 400 پیکسل؛ عرض: 80 درصد؛ حداکثر -width: 800px؛ حداقل عرض: 400px؛ حاشیه: 0 خودکار؛ پس‌زمینه: #fff؛ حاشیه: 4px ثابت # 666;) #پایین (موقعیت: مطلق؛ پایین: 0؛ سمت راست: 0؛) #nav (موقعیت: مطلق؛ چپ: 0؛ بالا: 0؛ پایین: 0؛ راست: 70 درصد؛ بالشتک: 20 پیکسل؛ حاشیه: 10 پیکسل؛) #محتوا (موقعیت: مطلق؛ چپ: 30 درصد؛ راست: 0؛ بالا: 0؛ پایین: 0؛ سرریز: خودکار؛ ارتفاع: 340 پیکسل؛ بالشتک: 20 پیکسل؛ حاشیه: 10 پیکسل؛)

  قبل از اینکه بتوانیم محتوای خود را متمرکز کنیم، باید ارتفاع بدنه و html را روی 100% تنظیم کنیم. از آنجایی که ارتفاع بدون حاشیه داخلی و خارجی (padding و margin) محاسبه می شود، آنها را (حاشیه) روی 0 قرار می دهیم تا اسکرول بار وجود نداشته باشد.

  بالشتک پایین برای عنصر "floater" -a برابر است با منهای نیمی از ارتفاع محتوا (400px)، یعنی -200px.

  صفحه شما اکنون باید چیزی شبیه به این باشد:

  

  عرض عنصر #مرکز 80 درصد است. این باعث می شود سایت ما در حال حاضر روی صفحه نمایش های کوچک و گسترده تر در صفحه نمایش های بزرگ باشد. اکثر سایت ها در مانیتورهای گسترده جدید در گوشه بالا سمت چپ، زشت به نظر می رسند. ویژگی‌های min-width و max-width نیز صفحه ما را محدود می‌کنند تا خیلی پهن یا خیلی باریک به نظر نرسد. اینترنت اکسپلورر از این ویژگی ها پشتیبانی نمی کند. باید یک عرض ثابت برای آن تعیین کنید.

  از آنجایی که عنصر #centered روی موقعیت: نسبی تنظیم شده است، می‌توانیم از موقعیت مطلق عناصر درون آن استفاده کنیم. سپس سرریز را تنظیم کنید: auto; برای عنصر #content، به طوری که در صورت عدم تناسب محتوا، نوارهای پیمایش ظاهر شوند.

  مرحله 3

  و آخرین کاری که ما انجام خواهیم داد این است که چند سبک اضافه کنیم تا صفحه کمی جذاب تر به نظر برسد. بیایید با منو شروع کنیم.

  #nav ul (سبک لیست: هیچ‌کدام؛ بالشتک: 0؛ حاشیه: 20 پیکسل 0 0 0؛ تورفتگی نوشتاری: 0؛) #nav li (بالشتک: 0؛ حاشیه: 3 پیکسل؛) #nav li a (نمایش: بلوک; پس‌زمینه رنگ: # e8e8e8؛ بالشتک: 7 پیکسل؛ حاشیه: 0؛ نوشتار تزئینی: هیچ؛ رنگ: # 000؛ حاشیه پایین: 1 پیکسل یکپارچه #bbb؛ تراز متن: راست؛) #nav li a :: after ( محتوا: "" "؛ رنگ: #aaa؛ وزن فونت: پررنگ؛ نمایشگر: درون خطی؛ شناور: سمت راست؛ حاشیه: 0 2px 0 5px؛) #nav li a: شناور، #nav li a: فوکوس (پس‌زمینه: # f8f8f8; حاشیه-پایین-رنگ: # 777;) #nav li a: شناور :: بعد (حاشیه: 0 0 0 7px؛ رنگ: # f93;) #nav li a: فعال (بالشتک: 8px 7px 6px 7px؛)

  اولین کاری که برای بهتر جلوه دادن منو انجام دادیم حذف نشانگرها با تنظیم ویژگی list-style روی none و همچنین تنظیم padding و padding بود، زیرا به طور پیش فرض در مرورگرهای مختلف بسیار متفاوت هستند.

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

  چیز جالب دیگری که ما برای منو استفاده کردیم این است: قبل و: بعد از کلاس های شبه. آنها به شما اجازه می دهند هر چیزی را قبل و بعد از یک عنصر اضافه کنید. این یک راه خوب برای اضافه کردن نمادها یا نمادهایی مانند یک فلش در انتهای هر پیوند است. این ترفند در اینترنت اکسپلورر 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؛ اندازه قلم: 0.7em; color: # f03;) #logo (اندازه قلم: 2em؛ تراز متن: مرکز؛ رنگ: # 999;) #logo قوی (وزن قلم: معمولی؛) #طول آرم (نمایش: بلوک؛ اندازه قلم: 4em؛ ارتفاع خط: 0.7em؛ رنگ: # 666؛) p، h2، h3 (ارتفاع خط: 1.6em؛) a (رنگ: # f03؛)

  در این سبک ها، گوشه های گرد را برای عنصر #مرکز قرار می دهیم. در CSS3، این مسئولیت بر عهده ویژگی border-radius خواهد بود. این هنوز توسط برخی از مرورگرها اجرا نشده است، مگر اینکه از پیشوندهای -moz و -webkit برای Mozilla Firefox و Safari / Webkit استفاده کنید.

  

  سازگاری

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

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

  237,152 بازدید

  روز بخیر، مشترکین و خوانندگان این نشریه. امروز می‌خواهم وارد جزئیات شوم و به شما بگویم که چگونه متن را در css تراز کنید. در برخی از مقالات قبلی به طور غیر مستقیم به این موضوع پرداختم، بنابراین شما در این زمینه اطلاعاتی دارید.

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

  Html و زاییده فکر آن و تراز کنید

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

  با توجه به اعتبار سنجی (این اصطلاح به طور مفصل در مقاله "" توضیح داده شده است)، پس خود مشخصات html استفاده از < مرکز>، زیرا برای اعتبار لازم است از یک انتقالی استفاده شود DOCTYPE>.

  این نوعموارد ممنوعه را رد می کند

  حالا بیایید به صفت بپردازیم تراز کردن... تراز افقی اشیاء را با اعلان برچسب تنظیم می کند و پس از آن متناسب می شود. معمولاً می توان از آن برای چینش چپ محتوا استفاده کرد ( ترک کردتراز راست ( درست)، متمرکز ( مرکز) و عرض متن ( توجیه).

  در زیر مثالی می زنم که در آن تصویر و پاراگراف در مرکز قرار می گیرند.

  این محتوا متمرکز خواهد بود.

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

  در مثالی که استفاده کردم تراز = "وسط "... این تصویر را طوری تراز می کند که جمله به وضوح در وسط تصویر باشد.

  ابزارهای مرکزی در css

  ویژگی های Css برای تراز کردن بلوک ها، متن و محتوای گرافیکی بسیار بیشتر استفاده می شود. این در درجه اول به دلیل راحتی و انعطاف پذیری اجرای سبک ها است.

  بنابراین، بیایید با اولین ویژگی متمرکز کردن متن شروع کنیم - این است متن-تراز کردن.

  عملکرد آن همانند align in است. از میان کلمات کلیدی، می توانید یکی را از لیست کلی انتخاب کنید یا ویژگی های جد را به ارث ببرید ( به ارث می برند).

  می خواهم توجه داشته باشم که 2 پارامتر دیگر را می توان در css3 تنظیم کرد: شروع کنید- بسته به قوانین نوشتن متن (از راست به چپ یا بالعکس) تراز را به چپ یا راست (مشابه کار چپ یا راست) تنظیم می کند و پایان- برعکس شروع (هنگام نوشتن متن از چپ به راست، به عنوان راست عمل می کند، هنگام نوشتن از راست به چپ - چپ).

  پیشنهاد سمت راست

  جمله با استفاده از پایان

  من در مورد یک ترفند کوچک به شما می گویم. هنگام انتخاب یک مقدار توجیهخط آخر می تواند از پایین به شکل زشتی آویزان شود. برای قرار دادن آن، به عنوان مثال، در مرکز، می توانید از ملک استفاده کنید text-align-last.

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

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  سی V E تیOبه

  سی V E تیOبه

  تورفتگی

  و در نهایت، با شما به تورفتگی در پاراگراف رسیدیم. زبان css از ویژگی خاصی به نام استفاده می کند تورفتگی متن.

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

  برای ایجاد یک خط قرمز، فقط باید یک پارامتر را بدانید.

  این ویژگی ساده تورفتگی متن است.

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

  تراز افقی

  حاشیه: خودکار

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

  عنصر (حاشیه-چپ: خودکار؛ حاشیه-راست: خودکار؛ عرض: 50٪؛)

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

  text-align: مرکز

  این روش برای چینش وسط متن در یک بلوک مناسب است. text-align: center:

  من تراز وسط هستم

  موقعیت و حاشیه منفی به سمت چپ

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

  من تراز وسط هستم

  نمایش: inline-block + text-align: center

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

  • خانه
  • درباره نویسنده

  چیدمان عمودی

  ارتفاع خط

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

  من به صورت عمودی تراز شده ام

  موقعیت و حاشیه منفی افزایش می یابد

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

  پوشش (موقعیت: نسبی؛) عنصر (ارتفاع: 200 پیکسل؛ حاشیه: -100 پیکسل 0 0؛ موقعیت: مطلق؛ بالا: 50 درصد؛)

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

  نمایش: سلول جدول

  برای تراز عمودی، ویژگی display: table-cell به عنصر اعمال می شود که باعث می شود سلول جدول را شبیه سازی کند. همچنین ارتفاع و تراز عمودی را تنظیم می کنیم: وسط آن. همه اینها را در ظرفی با خاصیت dislpay می پیچیم: table; :

  من به صورت عمودی تراز شده ام

  تراز کردن پویا یک عنصر در صفحه

  ما روش هایی را برای تراز کردن عناصر در صفحه با استفاده از CSS پوشش داده ایم. حال بیایید نگاهی به پیاده سازی نوع jQuery بیندازیم.

  بیایید jQuery را در صفحه قرار دهیم:

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

  تابع alignCenter (elem) (// کد اینجا)

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

  تابع alignCenter (elem) (elem.css ((سمت چپ: ($ (پنجره) .width () - elem.width ()) / 2 + "px"، بالا: ($ (پنجره) .height () - elem. ارتفاع ()) / 2 + "px" // به یاد داشته باشید موقعیت: مطلق را به عنصر اضافه کنید تا مختصات را فعال کند)))

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

  تابع آماده است، باقی می ماند که آن را در DOM آماده و رویدادهای تغییر اندازه پنجره آویزان کنیم:

  $ (تابع () (// فراخوانی تابع مرکز زمانی که DOM آماده است alignCenter ($ (elem))؛ // فراخوانی تابع زمانی که پنجره تغییر اندازه داده است $ (پنجره) .resize (تابع () (alignCenter ($ ( elem))))) // تابع برای مرکزیت عنصر تابع alignCenter (elem) (elem.css ((// محاسبه مختصات چپ و بالا سمت چپ: ($ (پنجره) .width () - elem.width ()) / 2 + "px"، بالا: ($ (پنجره) .height () - elem.height ()) / 2 + "px")))))

  با استفاده از Flexbox

  ویژگی های جدید CSS3، مانند Flexbox، کم کم رایج می شوند. این فناوری به ایجاد طرح بندی بدون استفاده از شناورها، موقعیت یابی و غیره کمک می کند. همچنین می توان از آن برای مرکز دادن عناصر استفاده کرد. به عنوان مثال، اجازه دهید از flexbox در .wrapper والد استفاده کنیم و محتوا را در مرکز قرار دهیم:

  Wrapper (نمایش: -webkit-box؛ نمایش: -moz-box؛ نمایش: -ms-flexbox؛ نمایش: -webkit-flex؛ نمایش: flex؛ ارتفاع: 500px؛ عرض: 500px؛) .wrapper .content (حاشیه: خودکار؛ / * حاشیه: 0 خودکار؛ فقط به صورت افقی * / / * حاشیه: خودکار 0؛ فقط عمودی * /)

  Lorem ipsum dolor sit amet

  این قانون عنصر را به صورت افقی و عمودی به طور همزمان متمرکز می کند - حاشیه اکنون نه تنها برای تراز افقی، بلکه برای تراز عمودی نیز کار می کند. و بدون عرض / ارتفاع مشخص.

  منابع مرتبط

  به پروژه کمک کنید

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

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

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

  • text-align: center;

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

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

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

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

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

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

  

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

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

  • چپ (شناور: چپ؛)
  • راست (شناور: سمت راست)

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

  • چپ (شناور: چپ؛)
  • راست (شناور: سمت راست)
  • پاورقی (روشن: هر دو)

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

  چیدمان عمودی

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

  • تراز بالا - .child (عمودی-تراز: بالا);
  • تراز مرکزی - .child (عمودی-تراز: وسط);
  • تراز پایین - .child (vertical-align: bottom);

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

  

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

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

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

  معمولاً از کلاس after استفاده می‌شود که به شما امکان می‌دهد با ایجاد یک شبه‌آر، بلوک‌ها را در جای خود قرار دهید (در مثال، یک div با یک کلاس ظرف در داخل .first قرار دارد و حاوی .left و .right است):

  • چپ (شناور: چپ)
  • راست (شناور: سمت راست)
  • .container: بعد (محتوا: ""؛ نمایش: جدول؛ پاک: هر دو؛)

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

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

  

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