[HTML] Gmail에서 HTML 특정 style 속성 적용되지 않는 문제

네이버 메일 등과 달리 Gmail에서는 display: flex; 속성은 되지만 flex의 하위 속성은 반영되지가 않는다.

예를 들어 flex-direction: column; 이라든가 align-items: center; 등의 속성이 적용되지 않는다.

 

그래서 보통은 display: block; 속성으로 하되, 요소를 담은 박스를 가운데 정렬을 하기 위해서는 align="center" 과 table을 이용한다.

 

검은색 테두리가 메일의 전체 영역이라고 했을 때, 빨간색 테두리 부분은 가운데 정렬을, 파란색 테두리 부분 안에 있는 요소들은 왼쪽 정렬을 하고 싶을 때 쓸 수 있는 방법이다.

<div align="center">
    <table>
    	<tr>
            <td>
            	<!-- 가운데 정렬이 제외된 영역 -->
            </td>
        </tr>
    </table>
</div>