• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
قرار دادن دقیق یک متن روبروی یک تصویر
#1
سلام،
خیلی ها این سوالو میکنن. دیگه خسته شدم Dodgy آخرین باریه که در موردش میگم. پس خوب گوش کنید.

واسه اینکه یه متن دقیقاً جلوی یه تصویر قرار بگیره ما به دو پراپرتی شدیداً نیاز داریم. یکی display و float . البته margin هم گاهی به کمک ما میاد تا تمییز تر کار کنیم. برای استایل تصویر float:left (لفت و رایتش رو خودت تشخیص میدی) و display:inline هم براش مینویسی. حالا متن رو اگر دیدی کاملاً جلوی عکس نیست باز برای تصویر با پراپرتی margin فاصله اش رو تنظیم کن.
خواستی متن هم فاصله بدی، متن رو درون یه <span> قرار بده بعد با margin فاصله اش رو تنظیم کن.

یه نمونه سریع:
کد:
<style type="text/css">
div.ax
{
width:32px;height:32px;
background-size:100%;
display:inline;
float:left;
margin-top:-7px;
background-image:url(ax.format);
}
div span
{
margin-left:6px;
}
</style>
<body>
<div><div class="ax"></div><span>this is an example markup</span></div>
</body>
غایب
  پاسخ
تشکر شده توسط :
#2
(۱۳۹۱ خرداد ۲۰, ۰۱:۳۱ ق.ظ)cyletech نوشته: واسه اینکه یه متن دقیقاً جلوی یه تصویر قرار بگیره

میگم نمی تونیم برا این کار به عکس vertical-align بدیم Confused
کد پی‌اچ‌پی:
vertical-alignmiddle
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط : cyletech
#3
چرا دقیقاً داداش مسعود. ولی وقتی از این پراپرتی استفاده میکنی (که بنظرم استاندارد تر هم هست) باید حتماً display رو برابر inline-block کنی و دیگر هیچ نیازی به هیچی نیست.
غایب
  پاسخ
تشکر شده توسط : masoudmanson


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان