Tablodaki resimleri metinle aynı yükseklikte olacak şekilde ayarlayın

Question 1

Resimlerimi bir resmin içine hizalamaya çalışıyorum. td etiket, Metnimle aynı yüksekliğe / düzene sahip olacak mı? teşekkürler

Kodum şu ana kadar:

<table style="border-bottom: 0px solid #ddd; margin-top: 20px;">
  <tr>
    <td id="instagram">
      <a href="https://www.instagram.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/instagram-social-media-camera-photo_icon-icons.com_59107.png" alt="Instagram" width="15%" /></a> Instagram</td>
    <td id="facebook">
      <a href="https://www.facebook.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/facebook-letter-social-media-f_icon-icons.com_59105.png" alt="Facebook" width="15%" /></a> Facebook</td>
    <td id="twitter">
      <a href="https://www.twitter.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/twitter-bird-animal-social-media_icon-icons.com_59106.png" alt="Twitter" width="15%" /></a> Twitter</td>
    <td id="youtube">
      <a href="https://www.youtube.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/youtube-video-social-media-play_icon-icons.com_59108.png" alt="Youtube" width="15%" /></a> Youtube</td>
  </tr>
  <tr>
    <td id="tinytext" colspan="4"> Follow for more </td>
  </tr>
</table>

Question 2

Görüntülerin metinle aynı yükseklikte olmasını istiyorsanız şunları kullanabilirsiniz height: 1em. em, öğenin yazı tipi boyutuna göredir. Bu durumda 16px (yazı tipi boyutu 16px, görüntü yüksekliği 16px'dir).

Sorun, resimlerinizin etrafında boş/saydam bir alan olması nedeniyle farklılık gösterebilir-bu nedenle aynı yükseklikte görünmüyorlar. Başka bir sorun yazı tipi olabilir. Yazı tipleri farklı satır tabanlarına sahiptir ve aynı yükseklikte değil gibi görünebilir. Bu nedenle, aynı yüksekliğe sahip olmak yerine aynı yüksekliğe daha çok benzemesi için görüntü yüksekliğinizi ayarlamanız gerekebilir (örneğin height: 1.25em, biraz ekle margin belki de vertical-align tabloda veya kullanımda flex vb.)

img {
   height: 1em;
}

<table>
    <tr>
        <td id="instagram">
            <a href="https://www.instagram.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/instagram-social-media-camera-photo_icon-icons.com_59107.png" alt="Instagram"></a>
            Instagram
        </td>
        <td id="facebook">
            <a href="https://www.facebook.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/facebook-letter-social-media-f_icon-icons.com_59105.png" alt="Facebook"></a>
            Facebook
        </td>
        <td id="twitter">
            <a href="https://www.twitter.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/twitter-bird-animal-social-media_icon-icons.com_59106.png" alt="Twitter"></a>
            Twitter
        </td>
        <td id="youtube">
            <a href="https://www.youtube.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/youtube-video-social-media-play_icon-icons.com_59108.png" alt="Youtube"></a>
            Youtube
        </td>
    </tr>
</table>

Piksel mükemmel görüntü örneği:

img {
  height: 1em;
}

This is my text <img src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg" />

Aynı yüksekliğe daha çok benzeyen örnek (dikey yönde ortalamak için esnek kullanılır):

div {
   display: flex;
   align-items: center;
}
img {
   height: 0.8em;
}

<div>
   UPPERCASE TEXT <img src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg" />
</div>

Jax-p · Answer 1 · 2021-11-23T15:58:05

Görüntülerin metinle aynı yükseklikte olmasını istiyorsanız şunları kullanabilirsiniz height: 1em. em, öğenin yazı tipi boyutuna göredir. Bu durumda 16px (yazı tipi boyutu 16px, görüntü yüksekliği 16px'dir).

Sorun, resimlerinizin etrafında boş/saydam bir alan olması nedeniyle farklılık gösterebilir-bu nedenle aynı yükseklikte görünmüyorlar. Başka bir sorun yazı tipi olabilir. Yazı tipleri farklı satır tabanlarına sahiptir ve aynı yükseklikte değil gibi görünebilir. Bu nedenle, aynı yüksekliğe sahip olmak yerine aynı yüksekliğe daha çok benzemesi için görüntü yüksekliğinizi ayarlamanız gerekebilir (örneğin height: 1.25em, biraz ekle margin belki de vertical-align tabloda veya kullanımda flex vb.)

img {
   height: 1em;
}

<table>
    <tr>
        <td id="instagram">
            <a href="https://www.instagram.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/instagram-social-media-camera-photo_icon-icons.com_59107.png" alt="Instagram"></a>
            Instagram
        </td>
        <td id="facebook">
            <a href="https://www.facebook.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/facebook-letter-social-media-f_icon-icons.com_59105.png" alt="Facebook"></a>
            Facebook
        </td>
        <td id="twitter">
            <a href="https://www.twitter.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/twitter-bird-animal-social-media_icon-icons.com_59106.png" alt="Twitter"></a>
            Twitter
        </td>
        <td id="youtube">
            <a href="https://www.youtube.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/youtube-video-social-media-play_icon-icons.com_59108.png" alt="Youtube"></a>
            Youtube
        </td>
    </tr>
</table>

Piksel mükemmel görüntü örneği:

img {
  height: 1em;
}

This is my text <img src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg" />

Aynı yüksekliğe daha çok benzeyen örnek (dikey yönde ortalamak için esnek kullanılır):

div {
   display: flex;
   align-items: center;
}
img {
   height: 0.8em;
}

<div>
   UPPERCASE TEXT <img src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg" />
</div>

Tablodaki resimleri metinle aynı yükseklikte olacak şekilde ayarlayın

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride