아주 오래전부턴 궁금했던건데 button 에 관련한 내용인데 문의 드립니다.
본문
안녕하세요.
상단의 이미지가 잘 보일지 의문이지만.. 잘보일거라 믿으며 질문 드립니다.
button 태그에서 내용텍스트를 2줄로 줄때 <br> 로 줄바꿈하여 작성하면
라인이 마진탑 준것처럼 윗 부분이 뜨는데요. 안뜨는법 있을까요?
엄청 오래전부터 궁금했던 처리방법인데... 미루다 미루다 이제야 여쭈어 봅니다.
뜨는 버튼을 마진 마이너스로 마추곤 했는데. 좋은방법 있을까요?
답변 2
<!DOCTYPE html>
<html>
<body>
<div style="background-color: red;">
<button style="width: 100px; height: 100px; vertical-align: middle;">버튼1<br>두줄</button>
<button style="width: 100px; height: 100px; vertical-align: middle;">버튼2</button>
</div>
</body>
</html>
감사하므니다!!!!!!!!!!!!!!!
여러가지 방법이 있겠지만,
저같은 경우는 주로 아래와 같은 형태로 사용합니다.
<style>
.button-group { display: flex; }
.flex-center { justify-content: center; }
.flex-right { justify-content: flex-end; }
.button-group > button:not(:last-child) { margin-right: 8px; }
</style>
<div class="button-group">
<button type="button">버튼1<br>두줄</button>
<button type="button">버튼1</button>
</div>
답변을 작성하시기 전에 로그인 해주세요.
