محاذاة الصور مع النص

Question

أريد أن مركز محاذاة صورة 18px الارتفاع مع النص بجانبه. هنا هو الرمز الذي أستخدمه:

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>

مع هذا الرمز، يتم تقديم حاوية DIC مع ارتفاع 19 بكسل بدلا من 18px والنص لم يتمركز مع الصورة. حاولت في Safari 4 و Firefox 3.6. ما هو سبب ذلك 1 PX؟

شكرا

Answer 1

1. لا تنسى إعادة تعيين الأساليب (الهامش / الحشد): Div، img، span {الهامش: 0؛ الحشو: 0؛ الحدود: 0}
2. للتوافق العمودي للعمل، عناصرك يجب أنا مضمنة.
3. الاختيار الكلاسيكي لمحاذاة النص عمودي هو إعطاء ارتفاع خط يساوي الحاوية.

علي سبيل المثال :

<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>

Answer 2

ربما لديك حدود في مكان ما هناك تحتاج إلى التخلص من أو تعيين إلى عرض صفر؟

Answer 3

أنا لست متأكدا تماما من أنني أفهم ما هي المشكلة هنا ولكن إذا كانت الصورة فقط هي بعض البكسلات من حيث تريد أن تكون، فلماذا لا تضع الصورة نسبيا فقط. علي سبيل المثال:

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>

سيؤدي ذلك إلى تحويل الصورة إلى أعلى بنسبة 2PX من حيث كان في الأصل.