묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
그림과 글을 한줄에 정렬시킬때 질문이요
2003.10.21 10:08
안녕하세요.
항상 홈페이지를 제작하거나 자잘한 작업을 할때마다 부딪히는 문제였는데...
항상 해결을 못하고 찜찜한대로 놔두다가 이렇게 질문까지 올리게 되었습니다.
일단, 설명을 드리자면...
먼저 그림을 ㅡㅡ;;
저기 로그인 이라고 써놓은 부분에서...
저 부분은 <td align="center" valign="center">를 사용해서 가로, 세로 모두 가운데로 정렬시켰습니다.
일단 대충 표면상으로는 모두 가운데 정렬처럼 보이는데...
마우스로 긁어놓은 부분안에서는... 아직도 valign이 top이죠...
그래서 이미지를 하나 만들어서 옆에 붙이면 윗줄을 기준으로는 정 가운데 위치하지만
아래줄을 기준으로 봤을때는 텍스트아래가 비어 보이기 때문에 찜찜해지죠 ㅡㅡ;;; (여러분은 안그렇다구요? 어쩔수 없습니다. 저는 찜찜합니다 ^^;;)
옆에 오는 그림의 img 태그문 안에 valign이나 align 태그도 적용시켜 봤는데...
텍스트의 크기는 눈에 보이는 크기가 아니라
마우스로 긁었을때 저 여백까지 포함해서 크기가 정해지는거 같더군요...
항상 저 아래 공백이 남아서 보기가 이상했습니다.
별거 아닌걸 가지고 설명이 굉장히 길었네요 ^^;;;
질문의 요점은 이겁니다....
1. 텍스트를 마우스로 긁은 부분 세로방향 가운데로 정렬시키는 방법
또는
2. 마우스로 긁은 부분에서 아래쪽 여백을 없애는 방법
해답 되도록 일찍 주셨으면 좋겠습니다 ^^;;;
그럼...
항상 홈페이지를 제작하거나 자잘한 작업을 할때마다 부딪히는 문제였는데...
항상 해결을 못하고 찜찜한대로 놔두다가 이렇게 질문까지 올리게 되었습니다.
일단, 설명을 드리자면...
먼저 그림을 ㅡㅡ;;
저기 로그인 이라고 써놓은 부분에서...
저 부분은 <td align="center" valign="center">를 사용해서 가로, 세로 모두 가운데로 정렬시켰습니다.
일단 대충 표면상으로는 모두 가운데 정렬처럼 보이는데...
마우스로 긁어놓은 부분안에서는... 아직도 valign이 top이죠...
그래서 이미지를 하나 만들어서 옆에 붙이면 윗줄을 기준으로는 정 가운데 위치하지만
아래줄을 기준으로 봤을때는 텍스트아래가 비어 보이기 때문에 찜찜해지죠 ㅡㅡ;;; (여러분은 안그렇다구요? 어쩔수 없습니다. 저는 찜찜합니다 ^^;;)
옆에 오는 그림의 img 태그문 안에 valign이나 align 태그도 적용시켜 봤는데...
텍스트의 크기는 눈에 보이는 크기가 아니라
마우스로 긁었을때 저 여백까지 포함해서 크기가 정해지는거 같더군요...
항상 저 아래 공백이 남아서 보기가 이상했습니다.
별거 아닌걸 가지고 설명이 굉장히 길었네요 ^^;;;
질문의 요점은 이겁니다....
1. 텍스트를 마우스로 긁은 부분 세로방향 가운데로 정렬시키는 방법
또는
2. 마우스로 긁은 부분에서 아래쪽 여백을 없애는 방법
해답 되도록 일찍 주셨으면 좋겠습니다 ^^;;;
그럼...
댓글 9
-
이호한
2003.10.21 11:16
-
최영곤
2003.10.21 12:00
//이호한
답글 정말 감사합니다. ^^
근데 적용시키려고 해보니까... 별 효과는 없네요 ^^;;;
위에서 말한대로 마우스로 긁은 영역이 가운데 정렬이 되는거고..
제가 원하는건 마우스로 긁은 영역 안의 문자가 가운데 정렬되는거 거든요
저도 여러가지 꼼수로 해보고 있는데 잘 안되네요 ^^;;; -
스티치
2003.10.21 13:03
글자를 이미지로 만드세요. 어차피 지금 이 화면에서도 마우스 긁어보시면 아시겠지만...
반전영역의 아래쪽이 항상 비게 되어 있습니다.
꽁수 비슷한걸로는 줄간격 즉... line-height 를 지정해주는 방법이 있으나.. 이것도 해결책은 되지 않을겁니다.
그냥 글자와 이미지를 통째 이미지로 만드세요 -
최영곤
2003.10.21 13:16
//스티치
제가 이미지 다시 수정했는데요...
보시면 아시겠지만 아래쪽은 또 괜찮네요 ^^;;;
이건 어떻게 해석을 해야하는건지...
그래서 꼼수로 윗쪽 로그인 글자 옆에도 inputbox을 놨는데... 것도 안먹히네요 ㅠ.ㅠ
그리고 이미지로 할거였으면 진작에 그랬죠 ㅡㅡ;;;
전 꼭! 텍스트로 하고 싶습니다. - 사나이가 칼을 뽑았다 이거죠 ^^;;; -
최영곤
2003.10.21 13:18
//스티치
이 화면을 마우스로 긁으니까 가운데 정렬된 부분이 있네요 -_-;
저기 바른생활 NZEO자동 코멘 달린부분요.
한번 긁어 보시길... -
키드
2003.10.21 14:01
우선 align이 left, center, right고 valign은 top, middle, bottom으로 알고 있습니다.
valign을 지우시구요, style="padding-top:상단여백픽셀"을 적당히 지정하시면 됩니다.
예를들어 td의 높이가 20 정도인 경우에는 padding-top을 3정도로 맞추면 되구요.
input의 경우에도 style="padding-top:상단여백픽셀"을 사용할 수 있습니다. -
최영곤
2003.10.22 09:16
//키드
일단 그렇게 하면 말씀대로 상단의 여백은 조절할 수 있네요...
그렇지만 제가 의도하는 이미지와 텍스트의 정렬은 되지 않는거 같네요... ^^;;; -
키드
2003.10.22 11:31
이미지와 텍스트를 동일하게 정렬을 하시려면 제일 편한 방법은
이미지와 텍스트를 다른칸(td)에 넣고 각자 상단 여백을 수정하셔도 되구요.
아니면 텍스트에 맞춰 이미지의 상단이나 하단에 투명으로 여백을 넣시면 편합니다. -
BelldandY
2003.10.27 13:14
valign=middle 로는 안되는건가요 ??
<td style="padding-top:1px;padding-bottom:1px;">하하하</td>
적당히 조절해보세요.