تراز عمودی Div css. CSS: تراز عمودی متن

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

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

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

روش اول با ارتفاع خط

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

CSS

Constutesim_first (
حاشیه: 2px جامد # bf1515;
ارتفاع: 175 پیکسل؛
}
.constutesim_first> p (
ارتفاع خط: 175 پیکسل؛
حاشیه: 0;
text-align: center;
بالشتک: 0;
اندازه فونت: 17px;
رنگ: # 3152a0;
font-family: Tahoma;
فونت-وزن: پررنگ;
}

شما همچنین می توانید در یک نگاه ببینید که چگونه همه چیز در واقعیت به نظر می رسد.

با روشی مشابه، می توان نحوه نمایش تصویر را که در مرکز و مطمئناً عمودی خواهد بود، پیاده سازی کرد. تنها برای ثبت یک ویژگی باقی مانده است vertical-align: middle; که وظیفه نمایش تصویر را بر عهده دارد.

CSS

تغییر دوم (
حاشیه: 2px قرمز جامد.
ارتفاع خط: 158 پیکسل.
}

div دومین تغییر (
text-align: center;
}
.scond-variation img (
vertical-align: وسط;
حاشیه: 0px جامد # 3a3838;
}

ما تصاویر را در مرکز و در جهت عمودی پیاده سازی می کنیم.

همسو شدن با ویژگی موقعیت

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

CSS

Competaird-Option (
حاشیه: 2px جامد # d40e0e;
ارتفاع: 162px;
موقعیت: نسبی;
}
.competaird-option div (
موقعیت: مطلق;
بالا: 50%;
سمت چپ: 50%;
قد: 28%;
عرض: 49%;
حاشیه: -2% 0 0 -25%;
حاشیه: 2px جامد # 4a4848;
}

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

تراز کردن با ویژگی جدول

در این روش از روش قدیمی آزمایش شده استفاده می کنیم که در آن عناصر را به جدولی تبدیل می کنیم که سلول ها در آن قرار دارند. در مورد برچسبی که جدول نامیده می شود، در اینجا استفاده نخواهد شد، در اینجا ویژگی CSS کاملاً متفاوتی را تنظیم می کنیم، این عبارت display: table ;, display: table-cell ; است. اگر در مورد قدیمی ترین نسخه های IE صحبت کنیم، داده ها در اینجا به سادگی نمایش داده نمی شوند. امیدوارم مرورگر خود را به روز کرده باشید، زیرا قدیمی شده و تقریباً همه چیز به درستی نمایش داده نمی شود.

Cherevert-Variation (
حاشیه: 2px جامد # c30b0b;
ارتفاع: 173 پیکسل;
نمایش: جدول;
عرض: 100%؛
اندازه فونت: 17px;
فونت-وزن: پررنگ;
رنگ: # 3945a0;
}

Cherevert-variation div (
صفحه نمایش: جدول-سلول;
vertical-align: وسط;
text-align: center;
}

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

تراز کردن با خاصیت flex

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

CSS

متغیر- افقی (
حاشیه: 2px جامد # d20c0c;
ارتفاع: 147 پیکسل;
صفحه نمایش: انعطاف پذیر
align-اقلام: مرکز;
justify-content: center;
اندازه فونت: 18px;
فونت-وزن: پررنگ;
رنگ: # 49518c;
}

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

تراز کردن با ویژگی transform

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

CSS

عمودی-medilpasudsa (
حاشیه: 2px جامد #e00a0a;
ارتفاع: 158 پیکسل؛
اندازه فونت: 19px;
فونت-وزن: پررنگ;
رنگ: # 353c71;
}
.vertical-medilpasudsa> div (
موقعیت: نسبی;
بالا: 50%;
transform: translateY (-50%);
text-align: center;
}

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

اگر می خواهید کاراکترها را به صورت افقی در یک عنصر قرار دهید، باید از text-align: center استفاده کنید. یک گزینه، اگر می خواهید آن را به صورت عمودی در مرکز قرار دهید و یک فوتر ثابت و یک ردیف متن دارید، ارتفاع خط را با ارتفاع پاورقی خود تنظیم کنید.

اگر می‌خواهید متن را در مرکز عنصری مانند div، هدر یا پاراگراف قرار دهید، می‌توانید از ویژگی CSS text-align استفاده کنید.

Text-align چندین ویژگی معتبر دارد:

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

از این ویژگی ها برای تراز کردن متن در والد یا div استفاده کنید. اگر می خواهید متن را به صورت افقی در یک عنصر در مرکز قرار دهید، باید از text-align: center استفاده کنید.

یک گزینه، اگر می خواهید آن را به صورت عمودی در مرکز قرار دهید، اگر یک هدر ثابت و یک ردیف متن دارید، ارتفاع خط را با ارتفاع پاورقی خود تنظیم کنید.

هرکسی که در چیدمان نقش دارد، دیر یا زود، با نیاز به تراز کردن عناصر به صورت عمودی مواجه می‌شود و می‌داند هنگام تراز کردن یک عنصر در مرکز چه مشکلاتی ممکن است پیش بیاید. CSS دارای یک ویژگی «تراز عمودی» با مقادیر متعدد است که به طور منطقی باید تراز عمودی را انجام دهد. اما در عمل به هیچ وجه آنطور که انتظار می رود کار نمی کند.

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

1. تراز کردن با استفاده از جدول

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

Html

CSS

بیرونی (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ تراز متن: مرکز؛ تراز عمودی: وسط؛ رنگ پس‌زمینه: #ffc؛)

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

اولین منهای را می توان تا حدی با جایگزین کردن تگ های جدول با div و تنظیم حالت نمایش جدول در CSS حذف کرد.

Html

CSS

Outer-wrapper (نمایش: جدول؛) .outer (نمایش: جدول-سلول؛)

2. تراز با تورفتگی

با فرض اینکه ارتفاع جعبه های داخلی و خارجی را می دانیم، تراز را می توان با استفاده از لایه بندی عمودی جعبه داخلی با استفاده از فرمول: (H outer - H inner) / 2 تنظیم کرد.

CSS

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

نقطه ضعف راه حل، دانستن اجباری ارتفاع هر دو بلوک است.

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

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

CSS

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

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

CSS

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

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

4. تراز با استفاده از "کشش"

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

برای اعمال این روش نیاز داریم:

• بلوک بیرونی را روی موقعیت نسبی قرار دهید: نسبی و در داخل - موقعیت مطلق: مطلق.
• چندین قانون بالا را اضافه کنید: 0 و پایین: 0 به بلوک داخلی، در نتیجه به کل ارتفاع بلوک بیرونی کشیده می شود.
• بالشتک عمودی بلوک داخلی را روی خودکار تنظیم کنید.

CSS

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

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

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

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

CSS

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

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

6. تراز با تبدیل

این روش را می توان در زمانی که ارتفاع یونیت داخلی ناشناخته است اعمال کرد. شما باید بلوک داخلی را به اندازه نصف ارتفاع بلوک بیرونی به پایین ببرید: 50%، سپس از ویژگی transform استفاده کنید و با استفاده از تابع translateY (-50%) آن را به بالا ببرید.

CSS

بیرونی (موقعیت: نسبی؛) درونی (موقعیت: مطلق؛ بالا: 50%؛ تبدیل: translateY (-50%)؛)

7. تراز با شبه عنصر

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

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

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

CSS

بیرونی: قبل (نمایش: بلوک درون خطی؛ ارتفاع: 100%؛ تراز عمودی: وسط؛ محتوا: ""؛) .inner (نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛)

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

8. با Flexbox تراز کنید

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

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

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

در اینجا دو دیو وجود دارد:

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

ارتفاع خط برای یک خط

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

شما نمی توانید از درصد ارتفاع خط = 100٪ استفاده کنید زیرا 100٪ در این مورد ارتفاع فونت است.

ظرف (
ارتفاع: 300 پیکسل؛
ارتفاع خط: 300 پیکسل؛
}

درونی (
فضای سفید: nowrap;
سرریز: پنهان
}

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

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

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

پایه - پیش فرض؛
... پایین - محتوا در پایین سلول؛
... وسط - محتوا در وسط سلول؛
... top محتوای بالای سلول است.

در مثال اول، یک سلول جدول تنها به بلوک بیرونی تبدیل می شود.

ظرف (
صفحه نمایش: جدول-سلول;
vertical-align: وسط;
}

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

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

لفاف بیرونی (
نمایش: جدول;
}

ظرف (
صفحه نمایش: جدول-سلول;
vertical-align: وسط;
}

موقعیت: مطلق + حاشیه منفی

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

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

ظرف (
موقعیت: نسبی;
}

درونی (
ارتفاع: 140px;
موقعیت: مطلق;
بالا: 50%;
margin-top: -70px;
}

عیب این روش این است که باید قد کودک را بدانید.

تراز کردن در راستای عمودی-تراز کردن

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

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

برای بلوک بیرونی، وسط یک خط تجویز می شود.

ظرف (
ارتفاع: 140px;
ارتفاع خط: 140 پیکسل؛
}

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

درونی (
صفحه نمایش: inline-block;
ارتفاع خط: معمولی.
vertical-align: وسط;
}

عیب این روش این است که باید قد والدین را بدانید.

همسویی با تبدیل

تابع translateY ویژگی transform به شما امکان می دهد یک بلوک داخلی را با ارتفاع نامعلوم در مرکز قرار دهید. برای انجام این کار، والدین باید به طور نسبی و کودک کاملاً در موقعیت قرار گیرند.

ویژگی top با مقدار 50% جعبه داخلی را پایین می آورد تا لبه بالایی آن در وسط والد قرار گیرد. مقدار TranslateY: -50٪، عنصر را تا نصف ارتفاع خودش افزایش می دهد و در نتیجه مراکز عمودی جعبه ها را هم تراز می کند.

ظرف (
موقعیت: نسبی;
}

درونی (
موقعیت: مطلق;
بالا: 50%;
transform: translateY (-50%);
}

نقطه ضعف پشتیبانی محدود IE برای توابع تبدیل.

تراز کردن از طریق شبه عنصر

این روش زمانی کار می کند که ارتفاع نه برای بلوک اول و نه برای بلوک دوم ناشناخته باشد. شبه عنصر بلوک درون خطی با استفاده از قبل یا بعد در داخل والد اضافه می شود. ارتفاع عنصر اضافه شده باید برابر با ارتفاع والد باشد - ارتفاع: 100%. تراز عمودی محتوا با استفاده از vertical-align: middle مشخص می شود.

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

ظرف: قبل از (
محتوا: ""؛
ارتفاع: 100%;
vertical-align: وسط;
صفحه نمایش: inline-block;
}

درونی (
صفحه نمایش: inline-block;
vertical-align: وسط;
}

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

فلکس باکس

جدیدترین و ساده ترین راه برای تراز عمودی عناصر. Flexbox به شما امکان می دهد عناصر یک صفحه وب را به هر شکلی که دوست دارید مرتب کنید. برای تراز کردن بلوک در مرکز، کافی است بنویسید display: flex به والد و margin: auto برای فرزند.

ظرف (
صفحه نمایش: انعطاف پذیر
عرض: 320 پیکسل؛
ارتفاع: 140px;
}

درونی (
عرض: 120 پیکسل؛
حاشیه: خودکار;
}

Flexbox فقط در مرورگرهای مدرن کار می کند.

انتخاب روش

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

ارتفاع عنصر نامشخص است

در این شرایط، می توانید از یکی از چهار روش جهانی استفاده کنید:

1. جدول. والد یک سلول جدول است که در HTML یا از طریق display-table / display-cell ایجاد شده است. این عنصر والد به حالت vertical-align اختصاص داده شده است: وسط.

2. شبه عنصر. برای جعبه بیرونی، یک شبه المان بلوک درون خطی با عرض = 100٪ و تراز عمودی: وسط ایجاد می شود. نمایشگر به نسل اختصاص داده می شود: بلوک درون خطی و تراز عمودی: وسط. این روش تنها زمانی کار نمی کند که موقعیت مطلق برای واحد داخلی مشخص شده باشد.

3. تبدیل. والد مقام می گیرد: نسبی. موقعیت به کودک اختصاص داده می شود: مطلق، بالا: 50% و تبدیل: translateY (-50%).

4. فلکس باکس. بلوک بیرونی روی نمایش: flex و بلوک داخلی روی حاشیه: auto تنظیم شده است.

فقط قد نواد مشخص است

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

یک خط در یک بلوک با ارتفاع مشخص

کادر بیرونی روی یک ویژگی line-height با مقداری برابر با ارتفاع آن تنظیم شده است.

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

به والدین ارتفاع خطی برابر با قد آن داده می شود. در نزول، مقدار line-height به مقدار عادی یا هر مقدار دلخواه لغو می شود و نمایش: inline-block و vertical-align: middle روی آن تنظیم می شود.

هدف مقاله امروز این است که به شما نشان دهد چگونه یک div را به صورت افقی و عمودی با چند ترفند CSS در مرکز قرار دهید. ما همچنین به شما نشان خواهیم داد که چگونه کل صفحه یا در یک div-element را در مرکز قرار دهید.

وسط آسان یک DIV در صفحه

این روش در همه مرورگرها عالی عمل خواهد کرد.

CSS

Center-div (حاشیه: 0 خودکار؛ عرض: 100 پیکسل؛)

مثال

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

DIV را به روش قدیمی در داخل DIV قرار دهید

این روش تراز کردن مرکز div در همه مرورگرها کار خواهد کرد.

CSS

Outer-div (padding: 30px;) .inner-div (حاشیه: 0 خودکار؛ عرض: 100px؛)

Html

مثال

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

مرکز کردن یک DIV درون یک عنصر DIV با استفاده از بلوک درون خطی

در این روش برای قرار دادن یک div در یک div، نیازی به تعیین عرض عنصر داخلی نیست. در تمام مرورگرهای مدرن از جمله IE8 کار خواهد کرد.

CSS

Outer-div (بالشتک: 30 پیکسل؛ تراز متن: مرکز؛) .inner-div (نمایش: بلوک درون خطی؛ پد: 50 پیکسل؛)

Html

مثال

ویژگی text-align فقط روی عناصر درون خطی کار می کند. مقدار inline-block اجازه می دهد تا div داخلی به عنوان یک عنصر درون خطی و همچنین یک بلوک نمایش داده شود ( بلوک درون خطی). ویژگی text-align در قسمت بیرونی به ما این امکان را می دهد که div داخلی را در مرکز قرار دهیم.

DIV را در داخل عنصر DIV به صورت افقی و عمودی قرار دهید

در اینجا، margin: auto برای وسط div به مرکز صفحه استفاده می شود. این مثال در تمام مرورگرهای مدرن کار خواهد کرد.

CSS

Outer-div (padding: 30px;) .inner-div (حاشیه: خودکار؛ عرض: 100px؛ ارتفاع: 100px؛)

Html

مثال

دیو داخلی باید عرض داشته باشد ( عرض) و ارتفاع ( ارتفاع). اگر div بیرونی ارتفاع ثابتی داشته باشد، روش شکست خواهد خورد.

DIV را در پایین صفحه وسط قرار دهید

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

CSS

Outer-div (موقعیت: مطلق؛ پایین: 30 پیکسل؛ عرض: 100٪؛) .inner-div (حاشیه: 0 خودکار؛ عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ رنگ پس‌زمینه: #ccc؛)

Html

مثال

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

DIV را به صورت عمودی و افقی روی صفحه قرار دهید

در اینجا، برای تراز کردن div با مرکز، دوباره از margin استفاده می‌کند: auto و موقعیت مطلق div خارجی. این روش در تمام مرورگرهای مدرن کار خواهد کرد.

CSS

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

مثال

عنصر div باید یک مجموعه عرض داشته باشد ( عرض) و ارتفاع ( ارتفاع).

مرکز پاسخگوی عنصر DIV در صفحه

در اینجا، برای تراز مرکزی div با CSS، عرض div را پاسخگو می کنیم تا به تغییرات پنجره پاسخ دهد. این روش در همه مرورگرها کار می کند.

CSS

Center-div (حاشیه: 0 خودکار؛ حداکثر عرض: 700 پیکسل؛)

مثال

div مرکزی باید دارای مجموعه ویژگی حداکثر عرض باشد.

با استفاده از ویژگی های بلوک داخلی، DIV را در داخل عنصر قرار دهید

div داخلی در اینجا پاسخگو است. این روش مرکزیت کردن div ها در داخل div ها در همه مرورگرها کار می کند.

CSS

Outer-div (بالشتک: 30 پیکسل؛) .inner-div (حاشیه: 0 خودکار؛ حداکثر عرض: 700 پیکسل؛)

Html

مثال

div داخلی باید دارای مجموعه ویژگی max-width باشد.

دو div پاسخگو را در کنار یکدیگر قرار دهید

در اینجا دو div پاسخگو در کنار هم داریم. این روش تنظیم div در مرکز صفحه در همه مرورگرهای مدرن کار می کند.

CSS

کانتینر (تراز نوشتاری: مرکز؛) .left-div (نمایش: بلوک درون خطی؛ حداکثر عرض: 300 پیکسل؛ تراز عمودی: بالا؛) .راست-div (نمایش: بلوک درون خطی؛ حداکثر عرض: 150 پیکسل. ) صفحه و (حداکثر عرض: 600 پیکسل) (.left-div, .right-div (حداکثر عرض چپ: 100٪؛))

Html

مثال

در اینجا چندین عنصر بلوک درون خطی در داخل یک ظرف مرکزی داریم. این مثال همچنین از پرس و جوهای رسانه ای CSS استفاده می کند. یعنی اگر اندازه صفحه نمایش کمتر از 600 پیکسل باشد، ویژگی max-width برای هر دو div چپ و راست روی 100٪ تنظیم می شود.

عنصر DIV در مرکز Flexbox

در اینجا CSS div را با Flexbox در مرکز قرار می دهیم. برای تسهیل فرآیند طراحی رابط کاربری در نظر گرفته شده است. این افزونه توسط Chrome 38+، IE11، Microsoft Edge، Firefox 38+، Safari 9+، Opera 30+، iOS Safari 9+ و Android Browser 40+ پشتیبانی می‌شود.

CSS

کانتینر (نمایش: انعطاف‌پذیر، تراز کردن آیتم‌ها: مرکز، توجیه محتوا: مرکز، ارتفاع: 100 ولت ساعت؛) آیتم (رنگ پس‌زمینه: # f3f2ef، شعاع حاشیه: 3 پیکسل، عرض: 200 پیکسل، ارتفاع: 100 پیکسل؛)

خواننده گرامی امروز به مشکل تراز عمودی در یک بلوک می پردازیم. بخش.

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

فرمول مسئله:لازم است محتوای بلوک ارتفاع متغیر را نسبت به عمودی در مرکز قرار دهیم.

حالا بیایید به حل مشکل بپردازیم.

و بنابراین، ما یک بلوک داریم، ارتفاع آن می تواند تغییر کند:

اولین چیزی که به ذهن می رسد این است که ترفند زیر را انجام دهید:

دلایل زیادی برای باور به این عبارت وجود دارد مسدود کردن محتوابا مرکز ارتفاع div ظرف تراز خواهد شد.

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

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

تراز عمودی عناصر درون خطی

فرض کنید رشته ای از متن دارید که با تگ های درون خطی شکسته شده است به قطعات:

شما استقبال می کند قطعهمتن

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

عمل تگ بلوک منجر به پیچیده شدن محتویات ظرف در یک خط جدید می شود.

یک تگ بلوک است. اگر تکه های متن را در بلوک ها محصور کنیم

, سپس هر یک از آنها در یک خط جدید ظاهر می شود. با استفاده از تگ که بر خلاف

، با حروف کوچک است، هیچ بسته بندی ظروف به یک خط جدید وجود نخواهد داشت، همه ظروف روی یک خط باقی بماند

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

برای ظروف ویژگی های CSS زیر را اعمال کنید:

#perviy (تراز عمودی: sub;) #vtoroy (تراز عمودی: 3px؛) #tretiy (تراز عمودی: -3px؛)

در نتیجه، خط متن به شکل زیر خواهد بود:

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

کمی منحرف می شویم، اکنون به وظیفه اصلی خود باز می گردیم.

تراز عمودی در ظرف div

صرف نظر از این، ما از ویژگی برای تراز کردن داخل ظرف div استفاده خواهیم کرد. تراز عمودی... همانطور که قبلاً گفتم، این ویژگی را می توان در مورد تراز کردن عناصر درون خطی استفاده کرد (ما در بالا به طور مفصل در مورد این مورد بحث کردیم و برای تراز کردن در یک ظرف div مناسب نیست). تنها برای استفاده از این واقعیت باقی می ماند که تراز عمودیبرای سلول های جدول کار می کند.

چگونه می توانیم از این استفاده کنیم؟ ما یک میز نداریم، ما با ظرف div کار می کنیم.

ها، معلوم است که بسیار ساده است.

ویژگی CSS نمایش دادنبه ما امکان می دهد بلوک div خود را به یک سلول جدول تبدیل کنیم، این کار را می توان به راحتی و به طور طبیعی انجام داد:

بیایید یک تقسیم کلاس داشته باشیم textalign:

برای این بلوک، ویژگی CSS زیر را مشخص کنید:

Textalign (نمایش: سلول جدول؛)

این دستور CSS به طور معجزه آسایی div ما را بدون تغییر ظاهری به سلول جدول تبدیل می کند. و برای سلول جدول می توانیم خاصیت را اعمال کنیم تراز عمودیتراز عمودی مورد نظر به طور کامل کار خواهد کرد.

با این حال، همه چیز نمی تواند به این سادگی تمام شود. ما یک مرورگر فوق العاده IE داریم. او بلد نیست با ملک کار کند نمایش: سلول جدول(پیشنهاد می کنم با جدول نشان دهنده عملکرد این ویژگی CSS در مرورگرهای مختلف در وب سایت htmlbook.ru آشنا شوید). بنابراین، باید به سراغ ترفندهای مختلفی برویم.

راه های زیادی برای دستیابی به تراز در یک ظرف div برای همه مرورگرها وجود دارد:

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

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

نظر مشروط

نوع طراحی:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

نظر شرطی نامیده می شود (مراقب باشید، شکل نظر شرطی باید کاملاً با مثال داده شده تا یک فاصله مطابقت داشته باشد).

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

بنابراین، با استفاده از یک نظر شرطی، می‌توانیم یک قطعه کد را از همه مرورگرها به جز IE پنهان کنیم.

راه حل مشکل

به دلیل این همه جعفری، ما باید HTML خود را با دو ظرف اضافی تغذیه کنیم. بلوک متن ما به این صورت خواهد بود:

برای کلاس کانتینر div textalignویژگی های CSS را تنظیم می کند که محتوای آن را به صورت عمودی برای همه مرورگرهای معمولی تراز می کند (البته به جز IE):

صفحه نمایش: سلول جدول. vertical-align: وسط;

و دو ویژگی دیگر که عرض و ارتفاع بلوک را تعیین می کند:

عرض: 500 پیکسل؛ ارتفاع: 500 پیکسل؛

این کاملاً برای تراز کردن محتویات ظرف در مرکز با توجه به عمودی در همه مرورگرها کافی است. به جز IE.

اکنون شروع به اضافه کردن ویژگی های مربوط به align می کنیم. برای مرورگرهای خانواده IE(برای آنها بود که از بلوک های اضافی استفاده کردیم بخشو طول):

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

Textalign div (موقعیت: مطلق؛ بالا: 50%؛)

چنین ساختاری به این معنی است: برای همه تگ های div در داخل یک بلوک با کلاس textalignخواص ذکر شده را اعمال کنید.

بر این اساس، سبک های مشخص شده برای بلوک textalignاصلاح می شوند:

Textalign (نمایش: سلول جدول؛ تراز عمودی: وسط؛ عرض: 500 پیکسل؛ ارتفاع: 500 پیکسل؛ موقعیت: نسبی؛)

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

برای روشن شدن آنچه در حال وقوع است، یک تصویر کشیدم:

همانطور که در تصویر می بینید، ما پیشرفت هایی داشته ایم. اما این همه ماجرا نیست! نقطه سمت چپ بالای کادر زرد در واقع 50٪ از کادر اصلی (بنفش) به پایین حرکت کرده است. اما ما به چیزی در پنجاه درصد ارتفاع بلوک بنفش نیاز داریم مرکز بلوک زرد، نه نقطه سمت چپ بالای آن.

اکنون از تگ استفاده خواهد شد طولو موقعیت نسبی آن:

گستره Textalign (موقعیت: نسبی؛ بالا: -50٪؛)

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

یه شمن کوچولو

اول از همه، ما باید جعفری را از همه مرورگرهای معمولی مخفی کنیم و آن را برای IE باز کنیم. این کار را می توان انجام داد، البته با کمک یک نظر مشروط، بیخود نبود که با آن آشنا شدیم:

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

راه حل:نیاز به اضافه کردن ملک سرریز: پنهانمسدود کردن textalign

با جزئیات ملک آشنا شوید سرریزمی تواند در باشد.

نمای نهایی دستورالعمل های بلوک CSS textalignبه نظر می رسد:

Textalign (نمایش: سلول جدول؛ تراز عمودی: وسط؛ عرض: 500 پیکسل؛ ارتفاع: 500 پیکسل؛ موقعیت: نسبی؛ سرریز: پنهان؛ حاشیه: 1 پیکسل مشکی یکدست؛)

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

مرکز در بلوک ارتفاع متغیر

اغلب اوقات لازم است که ارتفاع یک بلوک کلاس را تنظیم کنید. textalignنه در پیکسل، بلکه به عنوان درصدی از ارتفاع بلوک والد، و محتوای ظرف div را در وسط تراز کنید.

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

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

برای پیاده سازی یک بلوک با ارتفاع متغیر در مثال ما، CSS را کمی تغییر می دهیم:

کلاس textalignما ارزش ملک را تغییر خواهیم داد نمایش دادنبا سلول جدولبر روی جدولو دستورالعمل تراز را حذف کنید عمودی- تراز: وسط... اکنون می توانیم با خیال راحت مقدار ارتفاع را از 500 پیکسل به مثلاً 100 درصد تغییر دهیم.

بنابراین، ویژگی های CSS برای بلوک کلاس textalignبه این صورت خواهد بود:

Textalign (نمایش: جدول؛ عرض: 500 پیکسل؛ ارتفاع: 100 درصد؛ موقعیت: نسبی؛ سرریز: پنهان؛ حاشیه: 1 پیکسل سیاه و سفید؛)

باقی مانده است که تمرکز محتوا را پیاده سازی کنیم. برای انجام این کار، یک کانتینر div در یک بلوک کلاس قرار گرفته است textalign(این همان بلوک زرد رنگ در تصویر است)، باید ویژگی CSS را تنظیم کنید نمایش: سلول جدولسپس 100% ارتفاع را از بلوک والد به ارث می برد textalign(بلوک بنفش). و هیچ چیز ما را از تراز کردن محتویات ظرف div تودرتو در مرکز با ویژگی باز نمی دارد عمودی- تراز: وسط.

ما لیست دیگری از ویژگی های CSS را برای div تو در تو در ظرف دریافت می کنیم textalign.

Textalign div (نمایش: سلول جدول، تراز عمودی: وسط؛)

تمام ترفند همین است. به صورت اختیاری، می توانید ارتفاع را با محتوای متمرکز تغییر دهید.

برای اطلاعات بیشتر در مورد تراز عمودی بلوک ارتفاع متغیر، رجوع کنید به.