소개

요 전날, bootstrap4에서 중앙을 맞추려고했을 때 미묘하게 걸렸을 때의 이야기입니다.

무엇을 하고 싶었는가

행을 추가하고 그 안의 문자열을 중앙 정렬하고 싶었기 때문에,

sample.html

<div class="row text-center">
    sample
</div>

그렇게하면 잘 작동하지 않았습니다.



어라? div는 블록 요소로 text-align으로 조작 할 수 없었습니까? 라고 생각해, 3 패턴으로 비교해 보았습니다.

sample.html

<div class="row text-center">
    row sample
</div>
<div class="text-center">
    non row sample
</div>
<div class="row">
    <div class="col text-center">
        row col sample
    </div>
</div>

역시 row 단체로 사용하면 안되는 것 같네요.
개발자 도구로 보면 일발이었습니다.


"user agent stylesheet"에서 정의한 div 요소의 display:block이 row에서 flex로 덮어쓰여졌습니다.
생각해 보면, 원래 row는 col의 래퍼로서 사용되기 때문에, display:block이라고 col가 줄지어 있지 않습니다.

어쨌든 행을 늘리고 싶다고 하는 이유로 row를 사용해 버렸습니다만, 적절한 클래스를 선택해야 한다(라고 하는지 사용하지 않으면 안 됨)였습니다.

끝에

CSS는, 외형은 좋더라도 사용법이 다르다고 하는 것이 있어, 잘못 사용하는 것이 많다고 합니다. 어렵다・・・.