험에 직 사진이 테이블에 그들이 동일한 높이는 텍스트로

Question 1

I try to align 내의 내부 이미지는 td 태그를 높이가 같/레이아웃을 내 텍스트가 있습니까? 감사 u

내 코드는 지금까지:

<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 에 상대적입 글꼴 크기의 요소. 는 이 상황에서 16px(글꼴 크기는,16px 이미지 높이가 16px).

수도 있습 다르기 때문에 문제가 당신의 이미지를 일부 빈/투명한 공간이 그들의 주위에 -그래서 그것처럼 보이지 않는 그들은 동일한 높이입니다. 또 다른 문제가 될 수 있습 글꼴입니다. 글꼴은 다른선 기지와 수도 있습니다처럼 보이 동일하지 않은 높이입니다. 도록을 조절할 필요가 있을 수 있습니다 당신의 이미지 높이 더 보기 같은 동일한 높이는 대신 그것에 동일한 높이에(예를 들어 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 에 상대적입 글꼴 크기의 요소. 는 이 상황에서 16px(글꼴 크기는,16px 이미지 높이가 16px).

수도 있습 다르기 때문에 문제가 당신의 이미지를 일부 빈/투명한 공간이 그들의 주위에 -그래서 그것처럼 보이지 않는 그들은 동일한 높이입니다. 또 다른 문제가 될 수 있습 글꼴입니다. 글꼴은 다른선 기지와 수도 있습니다처럼 보이 동일하지 않은 높이입니다. 도록을 조절할 필요가 있을 수 있습니다 당신의 이미지 높이 더 보기 같은 동일한 높이는 대신 그것에 동일한 높이에(예를 들어 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>

험에 직 사진이 테이블에 그들이 동일한 높이는 텍스트로

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리