HTML – CSS 체크박스 수직정렬 맞추기

왜인지 모르지만 체크박스가 수직 정렬이 잘 안맞아서 글자랑 비뚤삐뚤 하네.

일단 결론적으로 이렇게 맞추었다. CSS의 남발인지 모르지만


소스 코드라고 할껀 없지만, 일단 올려둔다.

<div class="row mb-1 text-nowrap">
    <div class="col-auto d-flex align-items-center">
        <label class="form-label text-primary">기간별 검색 | </label>
        <label class="form-label" for="s_date_field">기간조건</label>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios0_1" value="option0_1" >
            <label class="form-check-label m-0 mx-1" for="dateRadios0_1">올해</label>
        </div>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios0" value="option0" >
            <label class="form-check-label m-0 mx-1" for="dateRadios0">전체</label>
        </div>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios2" value="option2" >
            <label class="form-check-label m-0 mx-1" for="dateRadios2">오늘</label>
        </div>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios1" value="option1" >
            <label class="form-check-label m-0 mx-1" for="dateRadios1">-1주</label>
        </div>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios4" value="option4" >
            <label class="form-check-label m-0 mx-1" for="dateRadios4">전월</label>
        </div>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios5" value="option5" >
            <label class="form-check-label m-0 mx-1" for="dateRadios5">당월</label>
        </div>
        <div class="form-check form-check-inline m-0 ms-2 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios7" value="option7" >
            <label class="form-check-label m-0 mx-1" for="dateRadios7">기간설정</label>
        </div>
        <input type="date" name="s_df" id="id_s_df" value="" class="form-control">
        <span> ~ </span>
        <input type="date" name="s_dt" id="id_s_dt" value="" class="form-control">
    </div>
</div>

d-flex align-items-center 이거의 남발일수 있지만

마진 이나 패팅을 0으로 만들고 억지로 끼워맞춘 느낌이지만 머 잘 보이면 되지