CSS를 사용한 텍스트 센터링이 IE에서 작동하지 않습니다.

StackOverflow https://stackoverflow.com/questions/68610

문제

IE에서 테이블 내의 텍스트를 중앙에 표시하는 데 문제가 있습니다.

Firefox 2, 3 및 Safari에서는 모든 것이 잘 작동하지만 어떤 이유로 IE 6 또는 7에서는 텍스트가 중앙에 표시되지 않습니다.

나는 다음을 사용하고 있습니다 :

h2 {
  font: 300 12px "Helvetica", serif; 
  text-align: center; 
  text-transform: uppercase;
}

나는 또한 추가를 시도했다 margin-left:auto;, margin-right:auto 그리고 position:relative;

소용이 없습니다.

도움이 되었습니까?

해결책

테이블 셀에는 텍스트 정렬이 필요합니다.센터.

다른 팁

CSS 텍스트 정렬 속성은 중앙에 배치하려는 요소가 아닌 상위 요소에 선언되어야 합니다.IE는 텍스트 정렬을 사용합니다.center 속성을 텍스트 중앙에 지정합니다.Firefox는 여백을 사용합니다.0 auto이고 중앙에 배치하려는 요소에 선언되어야 합니다.

<div style="text-align: center">
    <h2 style="margin: 0 auto">Some text</h2>
</div>

오타일 수도 있지만 여기에 세미콜론이 누락되었습니다.

margin-left:auto; margin-right:auto position:relative;

해야한다:

margin-left:auto; margin-right:auto; position:relative;

그래도 문제가 해결되지 않으면 텍스트를 중앙에 배치하려는 요소에 어느 정도 너비가 있는지 확인하세요.너비를 100%로 설정하고 변경된 사항이 있는지 확인하세요.

그만큼 text-align: center 블록 요소(h2) 내부의 텍스트를 중앙에 배치하므로 충분해야 합니다. 여백을 조정하면 텍스트가 아닌 블록의 위치가 변경됩니다.

IE가 그것에 대해 헛소리를 하고 있는 것인지 궁금합니다. font 거기 있다고 선언했어?

h2를 둘러싸는 div/td에 text-align:center를 사용하세요.

<table style = "width:400px;border:solid 1px;">
    <tr>
        <td style = "text-align:center;"><h2>hi</h2></td>
    </tr>
</table>

편집하다:와, stackoverflow의 커뮤니티는 꽤 빠릅니다!

Flexbox를 사용할 수 있거나 사용하고 싶다면 다음을 사용할 수도 있습니다.

display: flex;
justify-content: center;
align-items:center
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top