Ajustar imágenes en la tabla de tenerlos en la misma altura de texto

Question 1

Yo trate de alinear mis Imágenes en el interior de un td etiqueta a tener la misma altura/diseño de mi Texto? gracias a u

Mi código hasta el momento:

<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 desea que las imágenes a la misma altura que la del texto que usted puede utilizar height: 1em. em es relativa al tamaño de fuente del elemento. Que se encuentra en esta situación 16px (font-size es 16px, altura de la imagen es 16px).

Es posible que se diferencia porque el problema es que sus imágenes tiene algunas en blanco/transparente el espacio alrededor de ellos - por lo que no parece que estén a la misma altura. Otro problema puede ser de la fuente. Fuentes tiene distintas líneas de bases y también podría verse como que no es de la misma altura. Así que usted puede ser que necesite ajustar la altura de la imagen para hacerla más una mirada como la misma altura en lugar de tener en la misma altura (por ejemplo height: 1.25em, añadir un poco de margin o tal vez vertical-align en la tabla o el uso 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>

Ejemplo con píxel de la imagen perfecta:

img {
  height: 1em;
}

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

Ejemplo que se siente más como una misma altura (usa flex hacia el centro en dirección vertical):

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 desea que las imágenes a la misma altura que la del texto que usted puede utilizar height: 1em. em es relativa al tamaño de fuente del elemento. Que se encuentra en esta situación 16px (font-size es 16px, altura de la imagen es 16px).

Es posible que se diferencia porque el problema es que sus imágenes tiene algunas en blanco/transparente el espacio alrededor de ellos - por lo que no parece que estén a la misma altura. Otro problema puede ser de la fuente. Fuentes tiene distintas líneas de bases y también podría verse como que no es de la misma altura. Así que usted puede ser que necesite ajustar la altura de la imagen para hacerla más una mirada como la misma altura en lugar de tener en la misma altura (por ejemplo height: 1.25em, añadir un poco de margin o tal vez vertical-align en la tabla o el uso 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>

Ejemplo con píxel de la imagen perfecta:

img {
  height: 1em;
}

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

Ejemplo que se siente más como una misma altura (usa flex hacia el centro en dirección vertical):

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>

Ajustar imágenes en la tabla de tenerlos en la misma altura de texto

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría