🔥 با کمک هوش مصنوعی در کمتر از 6 ماه فول‌استک شوید ...
۰ ثانیه
۰ دقیقه
۰ ساعت
۱۱ نسیم مرادخانی
مشکل در تراز عمودی متن
جامعه 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

پایدار باشید

جواد رحمانیان ۱۷ تیر ۱۴۰۱، ۱۴:۳۲

نه درست نشد

نسیم مرادخانی ۱۷ تیر ۱۴۰۱، ۱۵:۱۵

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

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

جواد رحمانیان ۱۸ تیر ۱۴۰۱، ۰۴:۱۶
نسیم مرادخانی ۱۸ تیر ۱۴۰۱، ۱۱:۰۲

سلام مجدد

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

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


جواد رحمانیان ۲۰ تیر ۱۴۰۱، ۰۴:۰۵

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

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

نسیم مرادخانی ۲۰ تیر ۱۴۰۱، ۱۰:۴۲

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

نسیم مرادخانی ۲۰ تیر ۱۴۰۱، ۱۱:۳۷

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

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

جواد رحمانیان ۲۱ تیر ۱۴۰۱، ۰۳:۲۰

اوکی ممنون

نسیم مرادخانی ۲۱ تیر ۱۴۰۱، ۱۰:۴۳

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

نسیم مرادخانی ۲۱ تیر ۱۴۰۱، ۱۱:۳۱

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

جواد رحمانیان ۲۱ تیر ۱۴۰۱، ۱۳:۴۵