html / css에서 이미지 옆에 세로 가운데 텍스트를 어떻게 입력합니까?

html / css에서 이미지 옆에 세로 가운데 텍스트를 어떻게 입력합니까?

---

html에서 이미지 옆에있는 텍스트를 세로로 가운데에 맞추는 가장 쉽고 쉬운 방법은 무엇입니까? 브라우저 버전 / 유형에 구애받지 않아야합니다. 순수한 html / CSS 솔루션.

---

이것은 당신을 시작할 수 있습니다.

저는 항상 이 솔루션 에 의존 합니다 . 너무 해킹하지 않고 작업을 완료합니다.

편집 : 다음 코드로 원하는 효과를 얻을 수 있음을 지적해야합니다 (인라인 스타일을 용서하십시오. 별도의 시트에 있어야 함). 이미지 (기준선)의 기본 정렬로 인해 텍스트가 기준선에 정렬되는 것 같습니다. 중간으로 설정하면 적어도 FireFox 3에서 멋지게 렌더링됩니다.

<div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" style="vertical-align: middle;" width="100px"/>
    <span style="vertical-align: middle;">Here is some text.</span>
</div>

---

"순수한 HTML / CSS"는 테이블 사용을 제외합니까? 그들은 당신이 원하는 것을 쉽게 할 것이기 때문에 :

<table>
    <tr>
        <td valign="top"><img src="myImage.jpg" alt="" /></td>
        <td valign="middle">This is my text!</td>
    </tr>
</table>

당신이 좋아하는 모든 것을 나를 불 태우십시오. 그러나 그것은 작동합니다 (그리고 오래되고 버벅 거리는 브라우저에서 작동합니다).

---

방법은 다음과 같습니다. 이미지 태그 align = "absmiddle" 의 속성을 사용 하거나 테이블의 컨테이너 DIV 또는 TD에서 이미지와 텍스트를 찾고 사용

style="vertical-align:middle"

---

그것은 재미있는 것입니다. 텍스트 컨테이너의 높이를 미리 알고있는 경우 해당 높이와 동일한 줄 높이를 사용할 수 있으며 텍스트를 세로로 중앙에 배치해야합니다.

---

몇 가지 옵션이 있습니다.

• line-height를 사용하고 포함하는 요소만큼 긴지 확인할 수 있습니다.
• 디스플레이 사용 : 테이블 셀 및 수직 정렬 : 중간

내가 선호하는 옵션은 공간이 짧은 경우 첫 번째, 그렇지 않으면 후자입니다.

---

나는 표를 사용하는 것이 좋지만 <td valign="middle">( inkedmn 은 모든 브라우저에서 작동한다), 링크로 감싸는 방법은 다음과 같다 (Opera 9와 같은 못생긴 오래된 브라우저에서도 작동한다).

<a href="/" style="display: block; vertical-align: middle;">
    <img src="/logo.png" style="vertical-align: middle;"/>
    <span style="vertical-align: middle;">Sample text</span>
</a>

---

떠오르는 기본 방법 중 하나는 항목을 표에 넣고 두 개의 셀 (하나는 텍스트, 다른 하나는 이미지 포함)을 갖고 태그와 함께 style = "valign : center"를 사용하는 것입니다.

참고 URL : https://stackoverflow.com/questions/967022/how-do-i-vertical-center-text-next-to-an-image-in-html-css