• 목록
  • 아래로
  • 위로

transform 속성을 이용해서 텍스트를 가운데 정렬을 했는데, 파폭에서는 창 크기가 줄어들면 글자 일부분이 사라지네요 ㄷㄷ 

 

left: 50%;

top: 50%;

transform:translateX(-50%) translateY(-50%)

이렇게 적용되어 있는 상태인데, 크롬에서는 창이 줄면 텍스트가 두 줄이 될지언정 사라지는 일은 없었는데, 파폭에서는 창이 줄어들면 텍스트가 사라지네요... ㄷㄷ 

작성자
국내산라이츄 102 Lv. (79%) 845400/848720EXP

인생은 양자역학이외다

댓글 11

NoYeah
profile image

transform 속성이 표준이 아니어서 그럴 겁니다.

 

많이 알려진 방법으로는 margin:auto; 값을 적용하는게 가장 많이 알려진 방법이고, html 태그로 감쌀 수 있다면

태그 안에 내용을 넣으면 가운데 정렬을 합니다.
comment menu
2017.09.12. 19:10

신고

"NoYeah님의 댓글"

이 댓글을 신고 하시겠습니까?

국내산라이츄 작성자 → NoYeah
profile image

(아니 왜때문에 아직도 표준이 아닌 게 존재하는거죠)

comment menu
2017.09.12. 19:10

신고

"국내산라이츄님의 댓글"

이 댓글을 신고 하시겠습니까?

NoYeah → 국내산라이츄
profile image

예전에 표준이 정해지기 전에 브라우저들마다 중구난방으로 태그를 사용하던 시절이 있었는데 그 잔여물이 아직 남아있는게 아닌가 싶네요.

comment menu
2017.09.12. 19:11

신고

"NoYeah님의 댓글"

이 댓글을 신고 하시겠습니까?

신고

"국내산라이츄님의 댓글"

이 댓글을 신고 하시겠습니까?

NoYeah → 국내산라이츄
profile image

근데 저도 잘 모름.

comment menu
2017.09.12. 19:13

신고

"NoYeah님의 댓글"

이 댓글을 신고 하시겠습니까?

국내산라이츄 작성자 → NoYeah
profile image

결론은 브라우저들이 잘못한걸로... (음?)

comment menu
2017.09.12. 19:14

신고

"국내산라이츄님의 댓글"

이 댓글을 신고 하시겠습니까?

NoYeah → 국내산라이츄
profile image

그래서 브라우저들이 동시에 사용하기로 함 표준이 좋은 겁니다

comment menu
2017.09.12. 19:24

신고

"NoYeah님의 댓글"

이 댓글을 신고 하시겠습니까?

국내산라이츄 작성자 → NoYeah
profile image

아 그렇군요... 아참 트랜스폼은 width를 100프로로 해서 잡았습니다.

comment menu
2017.09.12. 21:14

신고

"국내산라이츄님의 댓글"

이 댓글을 신고 하시겠습니까?

마카롱
profile image

그냥 css는 짜증나는걸로 ㅎㅎ

comment menu
2017.09.13. 16:44

신고

"마카롱님의 댓글"

이 댓글을 신고 하시겠습니까?

신고

"국내산라이츄님의 댓글"

이 댓글을 신고 하시겠습니까?

NoYeah → 마카롱
profile image

맞아요.

이 속성 적용하면 다른곳에서 삐걱하고 그거 고치면 다른곳에서 삐걱하고...

comment menu
2017.09.14. 10:07

신고

"NoYeah님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [1차 해결 및 추가] 서버 접속 불가 문제 안내 12 마스터 24.06.20.15:22 367
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 2403
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 6093
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4606
666 커뮤니티 사이트의 출첵 게시판의 활성화에 대한 좋은 아이디어가 있을까요?? 4 이니스프리 20.01.19.00:44 188
665 VPS에서의 Selenium 사용과 관련하여 질문 드립니다. 4 image 이니스프리 20.01.17.14:37 213
664 '링 피트 어드벤처'가 정말 운동이 되는가요?? 4 이니스프리 20.01.11.12:41 290
663 우분투만 사용하다가 페도라 13 / Centos 6.9 시험에 응시하려면 적응하기 어려울까요? ㅠㅠ 8 image 이니스프리 20.01.08.22:56 345
662 파이썬 에디터로 어떤 것이 좋나요? 14 NoYeah 20.01.08.21:08 4545
661 이미지 외부링크가 엑박으로 나온다면 어느 부분을 우선적으로 검토해야 될까요? 이니스프리 20.01.05.23:15 619
660 해상도는 다르지만 동일한 이미지인지 체크하는 방법이 있을까요? 2 이니스프리 20.01.05.20:52 512
659 Beautifulsoup에서 .find(text=True, recursive=False)과 관련하여 질문 드립니다. 2 이니스프리 20.01.03.23:11 1153
658 [Selenium] 특정 XPath에서 parent 노드의 iframe을 알아낼 수 있을까요? 2 이니스프리 20.01.02.16:04 394
657 [파이썬] 윈도우에서 pip install로 모듈 설치시에 문제가 발생하는 것과 관련하여 질문 드립니다 2 이니스프리 19.12.29.00:51 249
656 여러 개의 반복작업을 켜고 끄는 버튼을 비동기적으로 구현해보려고 하는데요 ㅠㅠ 2 이니스프리 19.12.27.23:10 204
655 유튜브 채널 주소 잘아시는분있나요? 2 슬기 19.12.27.09:55 190
654 Requests나 Selenium에서 어떤 XHR 전송이 있었는지 확인할 수 있는 방법이 있을까요? 3 이니스프리 19.12.26.18:47 231
653 카고야 VPS에서 메일이 왔는데 일본어 관련해서 질문 드립니다. 5 이니스프리 19.12.26.11:45 203
652 [파이썬] 결과를 print 문으로 출력하는 것과 파일로 출력하는 것과 결과가 왜 다른가요? 8 image 이니스프리 19.12.25.13:19 771
651 음성번역기 앱 중에 켜놓으면 계속 번역을 해주는 앱이 있을까요? 이니스프리 19.12.25.11:16 218
650 https://imgnbvip.com/ 라는 이미지 호스팅 사이트가 있나요? image 이니스프리 19.12.24.11:08 269
649 Google Developer Console의 API 라이브러리 무료 이용에 대해 질문 드립니다. 5 image 이니스프리 19.12.23.12:58 199
648 부산 맛집 추천 부탁드려요~! 3 image 이니스프리 19.12.20.19:00 181
647 [Requests] multipart/form-data의 전송에 대해 질문 드립니다 ^^ 4 이니스프리 19.12.18.22:00 3074