Отрегулируйте изображения в таблице так, чтобы они были на той же высоте, что и текст

Question 1

Я пытаюсь выровнять свои изображения внутри td тег должен иметь ту же высоту/расположение, что и мой текст? спасибо тебе

Мой код до сих пор:

<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

Если вы хотите, чтобы изображения были одинаковой высоты с текстом, вы можете использовать height: 1em. em зависит от размера шрифта элемента. Что в данной ситуации составляет 16 пикселей (размер шрифта 16 пикселей, высота изображения 16 пикселей).

Это может отличаться, потому что проблема в том, что на ваших изображениях есть некоторое пустое/прозрачное пространство вокруг них, поэтому не похоже, что они одинаковой высоты. Другой проблемой может быть шрифт. Шрифты имеют разные основания строк, и это также может выглядеть так, как будто они не одинаковой высоты. Поэтому вам, возможно, потребуется отрегулировать высоту изображения, чтобы оно больше походило на ту же высоту, а не было на той же высоте (например height: 1.25em, добавьте немного margin или, может быть, vertical-align в таблице или использовать flex и т.д.)

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>

Пример с пиксельным идеальным изображением:

img {
  height: 1em;
}

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

Пример, который больше похож на ту же высоту (используется сгибание, чтобы центрировать его в вертикальном направлении):

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

Если вы хотите, чтобы изображения были одинаковой высоты с текстом, вы можете использовать height: 1em. em зависит от размера шрифта элемента. Что в данной ситуации составляет 16 пикселей (размер шрифта 16 пикселей, высота изображения 16 пикселей).

Это может отличаться, потому что проблема в том, что на ваших изображениях есть некоторое пустое/прозрачное пространство вокруг них, поэтому не похоже, что они одинаковой высоты. Другой проблемой может быть шрифт. Шрифты имеют разные основания строк, и это также может выглядеть так, как будто они не одинаковой высоты. Поэтому вам, возможно, потребуется отрегулировать высоту изображения, чтобы оно больше походило на ту же высоту, а не было на той же высоте (например height: 1.25em, добавьте немного margin или, может быть, vertical-align в таблице или использовать flex и т.д.)

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>

Пример с пиксельным идеальным изображением:

img {
  height: 1em;
}

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

Пример, который больше похож на ту же высоту (используется сгибание, чтобы центрировать его в вертикальном направлении):

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>

Отрегулируйте изображения в таблице так, чтобы они были на той же высоте, что и текст

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории