Ajuster les images dans le tableau pour les avoir à la même hauteur que le texte

Question 1

J'essaie d'aligner mes Images à l'intérieur d'un td balise d'avoir la même hauteur/mise en page que dans mon Texte? thank u

Mon code pour l'instant:

<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

Si vous voulez des images pour être à la même hauteur que le texte vous pouvez utiliser height: 1em. em est par rapport à la taille de police de l'élément. Qui est dans cette situation 16px (taille de police est 16px, la hauteur de l'image est 16px).

Il pourrait se distingue car problème est que vos images a quelques blanc/transparent, l'espace autour d'eux n'a pas l'impression qu'ils sont de la même hauteur. Un autre problème peut être de la police. Polices a différentes bases et il pourrait aussi ressembler à elle n'est pas la même hauteur. Donc, vous pourriez avoir besoin d'ajuster votre hauteur de l'image pour la rendre plus regarder un comme même hauteur au lieu de l'avoir en même hauteur (par exemple height: 1.25em, ajouter un peu de margin ou peut-être vertical-align dans le tableau ou l'utilisation flex etc.)

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>

Exemple avec pixel de l'image parfaite:

img {
  height: 1em;
}

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

Exemple qui ressemble plus à même hauteur (utilisé flex pour le centrer dans la direction verticale):

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

Si vous voulez des images pour être à la même hauteur que le texte vous pouvez utiliser height: 1em. em est par rapport à la taille de police de l'élément. Qui est dans cette situation 16px (taille de police est 16px, la hauteur de l'image est 16px).

Il pourrait se distingue car problème est que vos images a quelques blanc/transparent, l'espace autour d'eux n'a pas l'impression qu'ils sont de la même hauteur. Un autre problème peut être de la police. Polices a différentes bases et il pourrait aussi ressembler à elle n'est pas la même hauteur. Donc, vous pourriez avoir besoin d'ajuster votre hauteur de l'image pour la rendre plus regarder un comme même hauteur au lieu de l'avoir en même hauteur (par exemple height: 1.25em, ajouter un peu de margin ou peut-être vertical-align dans le tableau ou l'utilisation flex etc.)

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>

Exemple avec pixel de l'image parfaite:

img {
  height: 1em;
}

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

Exemple qui ressemble plus à même hauteur (utilisé flex pour le centrer dans la direction verticale):

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>

Ajuster les images dans le tableau pour les avoir à la même hauteur que le texte

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie