텍스트 세로 정렬이 이상해요 ㅠ
걸때
모바일페이지 진행중인데요
마진을 준 것도. .. 패딩을 준것도 아닌데 왜 상단으로 안 올라가고 저기 위치에 뜰까요?
제가 하고 싶은 건 한줄 일때나 두줄일때나 middle 정렬이 하고 싶거든요
뭘 해봐두 안되네요 ㅠ
문제가 뭘까요? ㅠㅠㅠㅠ!DOCTYPE html
html
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleUntitled Document/title
style type=text/css
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}
img {border:0; vertical-align:top;}
ul {list-style:none; float:left; margin:0; padding:0;}
li {float:left; display:inline;}
#wrap {width:320px; margin:0 auto;}
/* 0509 S */
.top{overflow:hidden; background:url(images/top.png) no-repeat; width:348px; height:71px;}
.name{background:url(images/name_bg.png) no-repeat;width:320px; height:74px; margin:0 9px;}
.name .txt{float:left;color:#fff; font-weight:bold;font-size:23px; padding-left:15px; text-align:left;width:190px; word-break:break-all; line-height:22px;border:1px solid red;}
.name .photo{float:right;border:2px solid #5493de; width:66px; height:46px; background:#fff;margin-right:38px;}
/* 0509 E */
.con{background:url(images/main_bg.png) no-repeat; width:302px; height:356px; margin:3px 9px;}
.con .title{padding:20px 0 0 10px;}
.con .tit{color:#005eb8; font-size:13px; font-weight:bold; background:#e6f6fc; width:262px; margin:0 10px; padding:5px 10px;}
/* 당첨 S */
.win_tit{width:320px; text-align:center; padding:15px 0 10px 0;}
.win_box{border:2px solid #5cbcff;margin:0 10px; width:300px; padding-top:20px;}
.win_img{text-align:center; width:296px}
.win_txt{background:#f6f9fb; font-size:11px; color:#4a4a4a; padding:15px 10px; margin-top:15px; width:280px; border-top:1px solid #d4e2e8;}
.win_txt2{padding-top:10px;}
/* 당첨 E */
/style
/head
body
div id=wrap
ul
li class=top/li
!-- 0509 S --
li class=name p class=txtJohn.KimJohn.KimJohn.KimJ/pp class=photo/p/li
!-- 0509 E --
li class=con
ul
li class=titleimg src=images/tit_1.png alt=Job position //li
li class=titHEAD OF SUSTAINABILITY/li
li class=titleimg src=images/tit_2.png alt=Favorite bodypart? //li
li class=titBlond Hair/li
li class=titleimg src=images/tit_3.png alt=Favorite brand in Unilever? //li
li class=titBlond Hair/li
li class=titleimg src=images/tit_4.png alt=Favorite part of your work? //li
li class=titBlond HairBlond HairBlond HairBlond HairBlond HairBlond HairBlond Hair/li
li class=titleimg src=images/tit_5.png alt=Favorite country in your travel history? //li
li class=titBlond Hair/li
/ul
/li
/ul
/div
/body
/html
-
엄마몬
상속되어서 마진을 먹고잇어요 인라인을 사용하든 !important를 사용하든 상속되는마진을 없애주시고
table-cell을 사용할려면 지금 클래스txt에 사용해야합니다. -
가랑비
ㅠㅠ...아..display:table-cell 도 해보고 별짓을 다해도 안되서.. ㅠ 그냥.. 패딩값을 주고 2가지 버전을 만들어서 개발쪽에서 하게끔 했어요.. ㅠ 디자이너인데 회사에서 야매로 배우면서 하느라 아직까지는 마크업이 엉망이네요 ㅠㅠ 감사합니다 ^^
-
지우
p class=\txt\John.KimJohn.KimJohn.KimJ/p
이 부분에 display:table-cell 을 줘보세요.
그런데 시맨틱 마크업이 안되고 있네요. 클래스 보니까 타이틀이라고 판단은 한거 같은데 정작 태그는 li네요.