이미지 위에 텍스트 넣는 방법 도움 바랍니다.
본문
<div style="position: relative; display: inline-block;">
<img src="https://ai.esmplus.com/ecoseobu/fulstop/%EC%B9%9C%ED%99%98%EA%B2%BD%EC%A0%9C%EC%B4%88%EC%A0%9C_%EC%A0%9C%EB%AA%A9%EB%B0%94%ED%83%95.jpg" style="display: block;">
<span style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); ">제목</span>
</div>
이미지에 텍스트를 넣고 싶은데, 위와 같이 하면 그누보드 editor에서는 이미지 가운데로 보이는데
확인 누르고 실행화면은 제목 텍스트가 이미지 오른쪽에 붙네요
도움 주시면 감사하겠습니다.
답변 4
<div style="height:180px;line-height:180px; text-align:center; background:url('https://ai.esmplus.com/ecoseobu/fulstop/%EC%B9%9C%ED%99%98%EA%B2%BD%EC%A0%9C%EC%B4%88%EC%A0%9C_%EC%A0%9C%EB%AA%A9%EB%B0%94%ED%83%95.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; ">
<span style="font-size:30px">제목</span>
</div>
질문의 코드가 잘못 된 것은 아니고 에디터에서 입력을 하면 인라인 스타일은 모두 삭제 되어버립니다
뷰페이지에서 소스보기 해보면 등록된 상태를 알 수 있겠습니다
답변을 작성하시기 전에 로그인 해주세요.
