이미지 위에 글자 넣기
본문
<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
<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 에서는 이미지 가운데로 텍스트가 들어가는데 확인 누르고 실행하면 텍스트가 이미지 오른쪽에 붙네요..
<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>
잘 되는데요.