كيفية محاذاة الصورة والنص عموديا داخل عنصر TD؟

StackOverflow https://stackoverflow.com/questions/447539

  •  22-07-2019
  •  | 
  •  

سؤال 

<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
 My feed
 </td>

هذه عن كيفية الشبه:


(مصدر: Garethjmsaunders.co.uk)
خلاصتي

الأيقونة والنص مسيء رأسيا. يوجد الرمز في الجزء العلوي من خلية الجدول ، النص في الأسفل. يحتل كل من النص والأيقونة 16 بكسل ولكن الخلية لا تزال تأكل 19. كيف يمكنني محاذاة لإنقاذ تلك البكسل 3؟

هل كانت مفيدة؟

المحلول

حسنًا ، إذا اخترت طريقة صورة الخلفية ، فسيكون الأمر بسيطًا جدًا:

background: url(feed.png) left center no-repeat

نصائح أخرى

تتماشى الصورة مع السطر الأساسي للنص ، وهذا لا يشمل ارتفاع السليل الذي هو "علامة" في رسالة مثل G أو Y.

إذا كان ارتفاع الصف/الخلية ثابتة ، فيمكنك إضافة ارتفاع خط للحصول عليه إلى الوسط رأسيًا. لذلك على سبيل المثال ، على افتراض أن زنزانتك مرتفع 16 بكسل:

td.feed {
    line-height:16px;
}

سيكون الخيار الآخر هو إضافة الأيقونة كصورة خلفية ، مع إضافة أحفاد اليسار إلى الخلية:

td.feed {
    background: transparent url(/wp-content/feed-icon-16x16.gif) no-repeat left center;
    padding-left: 18px; /* width of feed icon plus 2px spacing */
}

والثاني يعني أنه يمكنك إزالة الحاجة إلى الجداول على الإطلاق ، والآن هناك فكرة ...

الإجابات الأخرى التي تشير إلى أن الصورة لا ينبغي أن تكون جزءًا من المحتوى وأنه مجرد الديكور ، وهو أمر قابل للنقاش. أعتقد أنه يجب عليك إضافة فارغة alt ارتكب على صورتك حتى يتمكن قراء الشاشة من تجاهل الصورة إذا اخترت الاحتفاظ بأسلوبك الحالي.

ال vertical-align الخاصية هي التي تحتاج إلى استخدامها هنا ، ولكن ما تريد استخدامه هو text-bottom. سأفترض أيضًا أنك تريد أن يكون هذا رابطًا ، لذا إليك مثال رمز كامل:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>garethjmsaunders.co.uk</title>
    <style type="text/css">
    a { text-decoration: none; }
    a img { border: 0; vertical-align: text-bottom; }
    </style>
  </head>
<body>
<table>
<tr>
<td>
  <a href="" title="garethjmsaunders.co.uk rss feed">
    <img alt="" src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif" />
    My feed
  </a>
</td>
</tr>
</table>
</body>
</html>

إذا كان هذا لا يزال غير مرغوب فيه ، فيمكنك تجربة line-height والقيم الأخرى ل vertical-align لمعرفة ما هو أفضل بالنسبة لك.

ما الخطأ في جعلها صورة خلفية؟

.feed {
  background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
  padding-left: 16px;
}

ما عليك سوى محاولة "العمودي المحاذاة: الأوسط" على علامة IMG ، بعد مما يمكنك أيضًا تعيين حشوة لـ TD

جرب هذا:

<td>
   <img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
   <span class="feedTxt">My feed</span>
 </td>

 .feedTxt { line-height: 20px; } /* Or whatever the height of the image is.  Adjust as needed. */

أود أن أضع العنصرين (الصورة والنص) في خلايا الجدول المنفصلة الخاصة بهم. هل يمكن أن عش جدول آخر. هذا مكان جيد للبدء. ثم يمكنك اللعب مع الحشو ، وما إلى ذلك لضبط.

<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>

يمكنك أن تفعل position: relative; top: 3px; على ال <img> بطاقة شعار. يمكنك أيضا المحاولة vertical-align: middle; على ال <td> علامة ، لكنني لا أعتقد أنه سيعمل بشكل صحيح ، لأنني متأكد تمامًا من أنني واجهت هذا من قبل. يمكنك أيضا وضعها في منفصلة <td> العلامات ، ولكن هذا نوع من لا.

جربت طريقة صورة الخلفية ولكن لم يعجبني مثل هذا ...

في CSS ...

.iconLabel {
    position: relative;
    top: -6px;
    padding-left: 8px;
}

في الصفحة ...

<td style="text-align:center;">
    <a href="overview.cfm"
        ><img alt="Overview" src="Globe.png" 
        align="middle" border="0" height="60" width="60"
        ><span class="iconLabel">Overview</span
    ></a> 
</td>
  • العب مع "أعلى" اعترض على نقل النص/التسمية لأعلى ولأسفل.
  • العب مع حشوة قم بتغيير المسافة الأفقية بين الرمز والنص/التسمية.
  • يجب عليك التحقق من ذلك عبر أي متصفحات تهتم بها ، لأنها قد تقدم اختلافات طفيفة.
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top