아이파크
422
2020-07-23 14:17:18 작성 2020-07-23 14:17:57 수정됨
3
208

css vertical-align


안녕하세요


<td style="display: flex">
<input type="text" class="form-control input-sm critical cpu" id="cpu_alert_percentage" name="alertPercentage" checktype="cpu" style="width: 80%"/>
<div style="vertical-align: bottom;"><span>%</span></div>
</td>

이런식으로 input은 width의 80%프로만 가져가고 옆에 div 해서 vertical-align을 줬는데도 밑으로 안내려오는데 혹시 아래로 내릴수 있는 옵션이 무엇인지 가르쳐 주실수 있나요?


0
  • 답변 3

  • 화장실만가면오리무중
    318
    2020-07-23 14:26:04

    span은 기본적으로 높이가 폰트 사이즈만큼 잡힙니다

    display가 inline이라서..

    span display를 inline-block로 잡고

    높이를 input과 동일하게 주시는 방법도 있고

    line-height 주셔도 가운데로 맞출수 있겠네요

  • 아이파크
    422
    2020-07-23 14:31:51

    감사합니당


  • 화장실만가면오리무중
    318
    2020-07-23 14:56:18

    잘 확인이 안되신다면

    border를 주시면 영역이 차지하는 크기 위치 등이 잘 보이니

    공부하실때는 border:1px solid; 등 적용해서 해보세요

    도움 되실꺼에요

  • 로그인을 하시면 답변을 등록할 수 있습니다.