ProgramingTip

CSS 클래스를 사용하여 td 요소 내부에 div를 정렬하는 방법

bestdevel 2020. 11. 20. 09:17
반응형

CSS 클래스를 사용하여 td 요소 내부에 div를 정렬하는 방법


이런 식으로 작동합니다

<td align="center">

하지만 CSS 클래스를 사용하고 싶습니다.

이런 식으로 클래스를 정의했지만 운이 없습니다

td
{
    vertical-align: middle;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align: center;
}

작동하고 텍스트 정렬이 작동합니다. 그러나 td 내부의 div를 이런 식으로 정렬하지 않습니다. td 내부에 div를 정렬하고 싶습니다.


div { margin: auto; }

이 div를 중앙에 배치합니다.

Div 자체는 블록 요소입니다. 따라서 행동하는 방법을 div에 스타일을 정의해야합니다.


나는 문제에 대한 작은 (아마도 축소 된) 단편 없이는 당신을 많이 도울 수 없습니다. 문제가 내가 생각하는 것이라면

div 가 기본적으로 100 % 너비를 차지할 수 있습니다.

당신이 할 수있는 것은 div 내부의 인라인 요소 (예 : 텍스트)를 text-align : center로 정렬하는 것입니다. 의미 div를 display : inline-block으로 설정하는 것을 고려할 수 있습니다 .

인라인 블록 경로를 따라 가면 내가 가장 좋아하는 IE 해킹을 할 수도 있습니다.

width:100px;
display:inline-block;
zoom:1; //IE only
*display:inline; //IE only

해피 코딩 :)

참고 URL : https://stackoverflow.com/questions/7063201/how-to-align-a-div-inside-td-element-using-css-class

반응형