قرار دادن المان در وسط صفحه

قرار دادن المان در وسط صفحه

برای طراحی صفحه در دست ساخت (Under Construction) یک سایت باید لوگو دقیقا در وسط صفحه نمایش قرار می گرفت. (هم به صورت افقی و هم عمودی). قبلا این کار رو با قرار دادن auto برای margin چپ و راست، المان مورد نظر رو، در محور افقی در وسط قرار می دادم و اما برای وسط قرار دادن المان در محور عمودی به مشکل می خوردم و نتیجه کار هم زیاد جالب نبود معمولا!
این دفعه کنجکاو شدم که بدونم راه درست و بدون دردسر که نتیجه درستی داره چیه؟! که عکس داخل صفحه نمایش های متفاوت دقیقا وسط نمایش داده بشه. (قرار دادن المان در وسط صفحه)

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

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

قرار دادن المان در وسط صفحه
قرار گرفتن گوشه سمت چپ بالا در وسط صفحه

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

قرار دادن المان در وسط صفحه
قرار دادن المان در وسط صفحه

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

مقدار translate که برای transform در نظر گرفته شده، بر اساس ابعاد المان مورد نظر هست، بنابراین به درستی در وسط قرار می گیره!
و این گونه بود که متوجه شدم باید هر چه سریعتر در این زمینه و زمینه های مشابه خودم رو به روز کنم!

 

منبع: CSS-Trikcs

دیدگاه بگذارید

avatar
  Subscribe  
Notify of