Ajust obrázky v tabuľke, aby sa im v rovnakej výške ako text

0

Otázka

Snažím zladiť moje Obrázky vo vnútri je td značku mať rovnakú výšku/layout ako môj Text? ďakujeme u

Môj kód doteraz:

<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>

css html image
2021-11-23 15:29:26
1

Najlepšiu odpoveď

0

Ak chcete obrázky byť rovnakej výške ako text, môžete použiť height: 1em. em je relatívna k font-size prvku. Čo je v tejto situácii 16px (font-size je 16px, výšku obrazu je 16px).

Môže sa líši, pretože problém je, že vaše snímky má nejaké prázdne/priehľadný priestor okolo nich - tak to nevyzerá ako sú rovnakej výšky. Ďalším problémom môže byť písmo. Písma má rôzne riadok základne, a to môže vyzerať, že nie je v rovnakej výške. Takže by ste mohli potrebovať, ak chcete upraviť výšku obrazu, aby sa to viac pozrieť ako rovnakej výške namiesto toho, aby to v rovnakej výške (napríklad height: 1.25empridajte niektorých margin alebo možno vertical-align v tabuľke alebo pomocou flex atď.)

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>


Prí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" />


Príkladom, ktorý sa cíti viac ako rovnakej výške (používa sa flex do centra to vo vertikálnom smere):

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>

2021-11-23 15:58:05

V iných jazykoch

Táto stránka je v iných jazykoch

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................