이미지 위에 글자 넣기 채택완료
<div style="width: 750px; margin: 0px auto; text-align: center; color: black; font-family: "Nanum Gothic", sans-serif;" align="center">
<!-- 제목 -->
<div style="position:relative;"><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">
<span style="font-size: 60px;">제목</span></div></div>
제목 글자가 이미지 정중앙에 들어가도록 할려면 어떻게 하나요?
그누보드 에디터에서 html 작성하고 edit 누르면 이미지 속에 글자가 들어갔다가
확인 누르고 실제화면 보면 이미지 밖으로 나가버리네요.
이미지를 백그라운드로 해봤지만 마찬가지 입니다.
도움 부탁드립니다.
답변 4개
</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>
잘 되는데요.
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
감사합니다. 위 내용대로 하니 editor 에서는 이미지 가운데로 텍스트가 들어가는데 확인 누르고 실행하면 텍스트가 이미지 오른쪽에 붙네요..
댓글을 작성하려면 로그인이 필요합니다.
<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>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인