증상
표 액션 셀의 버튼 뭉치가 행마다 82px씩 어긋났다. 셀에 text-align: right를 걸고 getComputedStyle로 확인하니 right가 나온다. 그런데 버튼 좌표는 하나도 안 변했다.
셀 계산값: text-align: right ← 먹은 것처럼 보인다
버튼 x: 행0 [1475, 1558, 1674] · 행1 [1393, 1518, 1634] ← 그대로원인
셀의 자식이 <div class="d-flex ...">였다. text-align은 인라인 콘텐츠의 배치 규칙이고, flex 컨테이너 안의 배치는 justify-content가 정한다. text-align은 상속은 되고 적용은 안 된다. getComputedStyle은 상속된 값을 정직하게 돌려주지만, 그 값을 쓰는 레이아웃 알고리즘이 아닐 뿐이다. 검사가 엉뚱한 층을 봤다.
해법
flex 자식에 justify-content: flex-end. 주자 버튼 오른쪽 끝이 1892 한 값으로 수렴했다.
구조를 모르면 둘 다 건다 — flex/grid에는 justify-content/align-items, 인라인 흐름에는 text-align. 서로를 덮지 않는다.
검증
정렬 수리는 좌표로 검증한다. getBoundingClientRect로 버튼 x·오른쪽 끝·열 경계를 재서 행마다 같은 값으로 수렴하는지 본다. 계산값 검사는 "선언이 도달했나"만 본다. "그 선언이 무언가를 했나"는 좌표만 말해 준다.
★ 계산값은 필요조건이지 충분조건이 아니다. 검사한 자리와 일하는 자리가 다르면 계산값도 초록도 거짓말을 한다.