راکت
حل
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 از پایین یک فاصله ناخواسته داره ؟


ثبت پرسش جدید
علی فرمانی
علی فرمانی
تخصص :فرانت اند
@farmani5 سال پیشمطرح شد
1

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

display: flex;
align-items: center;

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

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

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

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

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

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

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

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

span {
    line-height: 120%;
}

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

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


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

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


علی فرمانی
علی فرمانی
تخصص :فرانت اند
@farmani5 سال پیشمطرح شد
1

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

display: flex;
align-items: center;

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

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


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

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


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

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