دوره زبان تخصصی برای برنامه‌نویسان (هدیه ویژه ثبت‌نام در دوره‌های متخصص) (فرصت محدود ⏰)
۰ ثانیه
۰ دقیقه
۰ ساعت
۱۱ LightMj
مشکل در تراز عمودی متن
جامعه Html & CSS ایجاد شده در ۱۵ تیر ۱۴۰۱

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

    font-size: 40px;
    background-color: rgb(201, 120, 34, 0.936);
    margin: 10px;
    padding: 10px;
    border: 10px dashed rgb(0, 21, 255);
    vertical-align: middle;
    height: 100px;
    background-clip: border-box;

درود

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

مثال از vertical align

پایدار باشید

نازنین کریمی مقدم ۱۷ تیر ۱۴۰۱، ۱۴:۳۲

نه درست نشد

LightMj ۱۷ تیر ۱۴۰۱، ۱۵:۱۵

لطف کنید کد رو در یک کدپن آپلود کنید و لینکشو اینجا به اشتراک بگذارید.

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

نازنین کریمی مقدم ۱۸ تیر ۱۴۰۱، ۰۴:۱۶
LightMj ۱۸ تیر ۱۴۰۱، ۱۱:۰۲

سلام مجدد

ببینید کلا الاینمنت عمودی راه‌های مختلفی داره (استفاده از پدینگ، ارتفاع خط یا فلکس) و در حالت عادی با پراپرتی vertical align نمیشه به تنهایی مدیریتش کرد.

برای مثال کافیه که شما در کلاس تست کد line-height: 100px; رو اضافه کنید. میبینید که درست عمل میکنه.


نازنین کریمی مقدم ۲۰ تیر ۱۴۰۱، ۰۴:۰۵

https://codepen.io/LightMj/pen/YzaqdLB

اینجوری اگه چند خط نوشته باشه از محدوده box model میزنه بیرون

LightMj ۲۰ تیر ۱۴۰۱، ۱۰:۴۲

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

LightMj ۲۰ تیر ۱۴۰۱، ۱۱:۳۷

خب در اون صورت باید با روش پدینگ ست کنید که کمی بالاتر مثالش رو گذاشتم.

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

نازنین کریمی مقدم ۲۱ تیر ۱۴۰۱، ۰۳:۲۰

اوکی ممنون

LightMj ۲۱ تیر ۱۴۰۱، ۱۰:۴۳

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

LightMj ۲۱ تیر ۱۴۰۱، ۱۱:۳۱

ممنون و پاینده باشید.

نازنین کریمی مقدم ۲۱ تیر ۱۴۰۱، ۱۳:۴۵