علیرضا ترابی
3 سال پیش توسط علیرضا ترابی مطرح شد
7 پاسخ

تراز کردن المنت ها در css

@ali.bayat
@milad
@hesammousavi
@juza۶۶
@Alimotreb
@endworld
@mohsenbostan
@mhyeganeh
@khanzadimahdi
@mohaligateway
@esn۷ir
@hossein.r.۱۴۴۲
@hosseinshirinegad۹۸
@rezajashnsaz۰۰۱۱
@Rp۷۶
@alireza.mzh
@ali.farmani
@muhammad
@ftp
@saman۱۱۱۱
@websaz
@SobhanDadkhah
@websaz
user-avatar
۱masoud
@masoudproton
@arian
@nimageneral
@ajdar۹۶۶۷
@TimeRunner۲۳۵۹
@arminbeik
@davoodkhany
@samanzdev
@mohsen.mehri۶۱۰۱
@mehranmarandi۹۰
@gomnam
@viva.mohammadi
@mostafa.۸۷۲۲
@cfarhad
@yk۵۷۴۲g
@miladparsi۱۰۷۰
@rezajahangir
@dfardabasi
@MehdiAghighi
@drcode.ir
@kamran.davar
@arminamirinasab

@sinashahoveisi
@ghomi
با سلام
توضیح تصویر رو وارد کنید

با توجه به شکل بالا span از لحاظ عمودی از سمت پایین یک فاصله ای داره، که نه padding هستش و نه margin. و همین امر باعث شده که زمانی که من المنت هارو میخوام تراز کنم، به مشکل بخورم. کسی میدونه چرا span از پایین یک فاصله ناخواسته داره ؟


ثبت پرسش جدید
علی فرمانی
تخصص : فرانت اند
@farmani 3 سال پیش آپدیت شد
1

بستگی به فونت استفاده شده و line-height داره . اینارو بررسی کنید .
برخی فونت ها استاندارد نیستن این مشکل رو دارن بیشتر فونت های فارسی ولی با line-height تست کنید
تا جایی میتونید فونت استاندارد استفاده کنید. فونت فارسی وزیر خوبه
برای تراز چنتا ایکن کنار به صورت تمیز هم من استفاده از flex رو پیشنهاد میکنم تمیز در میاد

display: flex;
align-items: center;

محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 3 سال پیش مطرح شد
3

سلام. دو تا راهکار ساده برای این قضیه رایج وجود داره:

اول اینکه از برای هر یک از span ها از vertical-align: middle استفاده کنید:

span{
    display: inline-block;
    vertical-align: middle;
}

و یا برای المنت wrapperشون از flexbox استفاده کنید:

.wrapper{
    display: flex;
    align-items: center;
}

atras
تخصص : Frontend dev
@atras 3 سال پیش مطرح شد
1

سلام
علاوه بر راهکار خوبی که بالا گفتن این راهکار هم هست که ارتفاع متن رو بهتر تنظیم کنی:

span {
    line-height: 120%;
}

علیرضا ترابی
@torabi18184 3 سال پیش مطرح شد
0

@mhyeganeh
@atras
واقعیتش این راهکار هارو امتحان کردم ولی مشکل حل نشد. اصلا چرا باید این span از ارتفاع محتوای درونش کمی بزرگ تر باشه ؟؟


Banana Life
@shift.delete 3 سال پیش مطرح شد
0

برای حل این مشکل میتونید تگ Span جداگانه پدینگ و مارگین بدید تا با تگ های دیگه هم تراز بشه.


علی فرمانی
تخصص : فرانت اند
@farmani 3 سال پیش آپدیت شد
1

بستگی به فونت استفاده شده و line-height داره . اینارو بررسی کنید .
برخی فونت ها استاندارد نیستن این مشکل رو دارن بیشتر فونت های فارسی ولی با line-height تست کنید
تا جایی میتونید فونت استاندارد استفاده کنید. فونت فارسی وزیر خوبه
برای تراز چنتا ایکن کنار به صورت تمیز هم من استفاده از flex رو پیشنهاد میکنم تمیز در میاد

display: flex;
align-items: center;

علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 3 سال پیش مطرح شد
1

از flexbox استفاده کن


ام ین
تخصص : jamstack
@honeyamin18 3 سال پیش مطرح شد
0

برای محتوای خطی افقی flex بهتر از grid هست اما درهرصورت ساپورت مرورگر مدنظرتونم چک کنید


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام