[html/css] html 테이블 텍스트/버튼 동시사용시 깨짐 해결 방법

[html/css] html 테이블 텍스트/버튼 동시사용시 깨짐 해결 방법

 

 

html 에서

 

테이블을 이용하여

 

데이터를 표기하다 보면

 

텍스트와 버튼을 혼용하는 경우가 있습니다.

 

 

 

버튼때문에 텍스트의 위치가 td 안의 영역중

 

최상단에 붙어서 깨져보이게 되는데요.

 

그럴때는 아래 속성을 이용하시면 됩니다!

display: flex; justify-content: space-between; align-items: center

 

예를 들어 아래와 같이

 

텍스트와 버튼이 같이 사용된 td 가 있다고 가정하고,

 

<td>
    qwdqwdqwdqwdqwd
    <button>wdqdqwd</button>
</td>

 

이걸 높낮이 중앙 정렬을 하고 싶으면

 

아래와 같이 처음에 언급된 속성을 가지고 있는

 

div 를 하나 만들어서 묶어 주면 됩니다!

 

<div style="display: flex; justify-content: space-between; align-items: center">
  <td>
      qwdqwdqwdqwdqwd
      <button>wdqdqwd</button
  </td>
</div>

 

참고들 하세요!