وسط چین کردن والد عناصر inline در CSS

- visibility ۹ mode_comment

به نام خدا

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

شاید خیلی شده که یک "دیو"ی داشتید و داخلش هم چند المنت دیگه داشتید که به اونها خاصیت float دادید یا display اونهارو به صورت inline یا inline-block قرار دادید.(معمولا به این چنین المنت هایی که داخلش المنت های دیگری وجود داره، container میگن.) خب وقتی خواستید container تون رو توسط margin: 0 auto; وسط چین کنید نمیشد؛ اگر  تا حالا به این مشکل برخورد کرده باشید میدونید که باید به container، عرض ( width) بدید تا container وسط چین بشه.

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

به نظرتون اون راه چی میتونه باشه؟! تا حالا به display مقدار table دادید؟

روش: به container ، خاصیت و مقدار display: table; رو میدیم.

info نکته :

تنها مرورگرهای IE 8 به پایین از مقدار table برای خاصیت display پشتیبانی نمیکنند.

خب برای اینکه کاملا با این روش آشنا بشید یک صفحه HTML رو به چند صورت استایل میدم تا نتایج رو ببینید.

HTML:

(کدهای HTML فقط همین ها هستند و هر بار تنها کدهای CSS رو تغییر میدیم.)

CSS:

توضیح: در این قسمت ما هنوز به خاصیت display مقدار table ندادیم.

خب حالا نتیجه:demo01

همونطور که دیدید عرض container برابر 100% شد و ارتفاعش هم برابر 0px !

CSS:

توضیح: در این بخش تنها خط 12 تغییر کرد.و حالا شاهد نتیجه باشید.

demo2

همونطور که میبینید در این بخش با تغییر خط 12، container توانست ارتفاع فرزندان خود رو تشخیص بده؛ اما هنوز هم عرضش برابر 100% هست.بنابراین هنوز هم نمیتونیم container رو وسط چین کنیم.

CSS:

در این بخش از روش خودمون استفاده کردیم، یعنی: خط 5 رو به display: table; تغییر دادیم.و حالا نتیجه:demo3

همونطور که دیدید عرض container به اندازه ی عرض فرزندانش شد و تونستیم با margin: 0 auto; اون رو وسط چین کنیم.

CSS: 

توضیح: این بار خط 12 رو تغییر دادیم و نتیجه باز هم مثل قبل بود. نتیجه:demo3

معمولا از این ترفند برای وسط چین کردن post meta data ها(یا همون اطلاعات پست، مثل بالای همین پست که اطلاعاتی چون نویسنده، تعداد نظرات، تعداد بازدید و ... داره) استفاده میکنن.

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

موفق باشید؛ یا علی

comment دیدگاه کاربران
بهرام

واقعا عالی و کاربردی بود ممنون

بهرام

من الان همین مشکل رو دارم اما با روشی که شما گفتید رفع نمیشه. ببینید من درست فهمیدم. به اون container که همون div باشه باید display table و برای li های لیست داخلی display inline-block.
درسته؟

علی امینی

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

بهرام

مرسی علی آقا درست شد، به ul display table و margin auto دادم و li display inline-block. با div نمیشد.

ali ali

ایا لینک دادن به مطلب و تصویر بصورت کوتاه مشکلی ایجاد میکنید

علی امینی

ببخشید درست متوجه سوالتون نشدم، میشه سوالتونو واضح تر بپرسید؟

ali ali

منظورم اینه که نام دامنه رو وارد نکنم
میخوام تو یه قسمت از سایت لینک یک آموزش رو بزارم مثلا آدرس همین صفحه
به این صورت هست
http://www.7learn.com/tutorials/center-container-with-display-table-in-css-3/comment-page-1#comment-21263

به این صورت وارد کنم
/tutorials/center-container-with-display-table-in-css-3/comment-page-1#comment-21263

لقمان آوند

خوب دومین رو با یه space جایگزین کن در آدرس لینک .

ali ali

متوجه نشدم میشه بیشتر توضیح بدید.
ببخشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.