Ajust obrázky v tabulce mít je ve stejné výšce jako text

Question 1

Snažím se sladit své Snímky uvnitř td tag mít stejné výšce/rozvržení, jak můj Text? děkujeme, že u

Můj kód tak daleko:

<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

Pokud chcete obrázky, které mají být stejné výšce jako text, můžete použít height: 1em. em je relativní velikost písma font-size prvek. Což je v této situaci 16px (font-size je 16px, výška obrázku je 16px).

To by se liší, protože problém je, že vaše snímky má nějaké prázdné/transparentní prostor kolem nich - , takže to nevypadá, jako že jsou stejné výšce. Dalším problémem může být písmo. Fonty má různé linie základen a mohlo by to také vypadalo, že to není stejné výšce. Takže možná budete muset upravit svůj image výšku, aby se to více vypadat jako stejné výšce, místo toho je ve stejné výšce (např. height: 1.25em, přidat nějaké margin nebo možná vertical-align v tabulce nebo použití flex atd.)

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>

Příklad s pixel dokonalý obraz:

img {
  height: 1em;
}

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

Příklad, který se cítí více jako stejné výšce (používá flex na střed ve svislém směru):

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

Pokud chcete obrázky, které mají být stejné výšce jako text, můžete použít height: 1em. em je relativní velikost písma font-size prvek. Což je v této situaci 16px (font-size je 16px, výška obrázku je 16px).

To by se liší, protože problém je, že vaše snímky má nějaké prázdné/transparentní prostor kolem nich - , takže to nevypadá, jako že jsou stejné výšce. Dalším problémem může být písmo. Fonty má různé linie základen a mohlo by to také vypadalo, že to není stejné výšce. Takže možná budete muset upravit svůj image výšku, aby se to více vypadat jako stejné výšce, místo toho je ve stejné výšce (např. height: 1.25em, přidat nějaké margin nebo možná vertical-align v tabulce nebo použití flex atd.)

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>

Příklad s pixel dokonalý obraz:

img {
  height: 1em;
}

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

Příklad, který se cítí více jako stejné výšce (používá flex na střed ve svislém směru):

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>

Ajust obrázky v tabulce mít je ve stejné výšce jako text

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii