테스트 사이트 - 개발 중인 베타 버전입니다

이미지 위에 텍스트 넣는 방법 도움 바랍니다. 채택완료

친환경서부농약사 2개월 전 조회 413

<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에서는 이미지 가운데로 보이는데

확인 누르고 실행화면은 제목 텍스트가 이미지 오른쪽에 붙네요

 

도움 주시면 감사하겠습니다.

 

댓글을 작성하려면 로그인이 필요합니다.

답변 5개

채택된 답변
+20 포인트
s
sinbi Expert
2개월 전

</p>

<p><div style="height:180px;line-height:180px; text-align:center; background:url('<a href="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');" target="_blank" rel="noopener noreferrer">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');</a>  background-size: cover; background-position: center; background-repeat: no-repeat; ">

  <span style="font-size:30px">제목</span>

</div></p>

<p>

https://codepen.io/sinbi/pen/yyYRwWQ

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

텔로미어73
2개월 전

답변 주셔서 감사합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

2개월 전

질문의 코드가 잘못 된 것은 아니고 에디터에서 입력을 하면 인라인 스타일은 모두 삭제 되어버립니다

뷰페이지에서 소스보기 해보면 등록된 상태를 알 수 있겠습니다

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

들레아빠
2개월 전
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

친환경서부농약사
2개월 전
답변 주셔서 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

텔로미어73
2개월 전

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인