• 목록
  • 아래로
  • 위로

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

 

left: 50%;

top: 50%;

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

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

작성자
국내산라이츄 103 Lv. (85%) 862850/865280EXP

인생은 양자역학이외다

댓글 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님의 댓글"

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

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 시스템 점검 작업 완료 안내 10 마스터 24.09.05.16:25 1121
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 7804
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4805
286 Crontab에서 파이썬 실행이 시간적으로 겹치는 것과 관련하여 질문 드립니다 ^^ 이니스프리 19.12.06.01:06 1393
285 프로그래머스의 코딩테스트 연습과 COS PRO 난이도에 대해 질문 드립니다. 5 이니스프리 19.12.08.22:26 465
284 머신러닝 오프라인 강좌를 수강해보려고 하는데요~ 이거 괜찮을까요? 5 image 이니스프리 19.12.11.03:12 328
283 논논비요리 만화책을 보려고 하는데 일본어를 얼마나 공부해야 될까요? 4 image 이니스프리 19.12.15.16:38 485
282 프로그래머스 코딩테스트 연습에서 효율성 심사를 통과하려면 어떻게 해야할까요? 2 이니스프리 19.12.18.01:55 2887
281 [Requests] multipart/form-data의 전송에 대해 질문 드립니다 ^^ 4 이니스프리 19.12.18.22:00 3128
280 부산 맛집 추천 부탁드려요~! 3 image 이니스프리 19.12.20.19:00 199
279 Google Developer Console의 API 라이브러리 무료 이용에 대해 질문 드립니다. 5 image 이니스프리 19.12.23.12:58 227
278 https://imgnbvip.com/ 라는 이미지 호스팅 사이트가 있나요? image 이니스프리 19.12.24.11:08 285
277 음성번역기 앱 중에 켜놓으면 계속 번역을 해주는 앱이 있을까요? 이니스프리 19.12.25.11:16 241
276 [파이썬] 결과를 print 문으로 출력하는 것과 파일로 출력하는 것과 결과가 왜 다른가요? 8 image 이니스프리 19.12.25.13:19 789
275 카고야 VPS에서 메일이 왔는데 일본어 관련해서 질문 드립니다. 5 이니스프리 19.12.26.11:45 222
274 Requests나 Selenium에서 어떤 XHR 전송이 있었는지 확인할 수 있는 방법이 있을까요? 3 이니스프리 19.12.26.18:47 260
273 유튜브 채널 주소 잘아시는분있나요? 2 슬기 19.12.27.09:55 206
272 여러 개의 반복작업을 켜고 끄는 버튼을 비동기적으로 구현해보려고 하는데요 ㅠㅠ 2 이니스프리 19.12.27.23:10 226
271 [파이썬] 윈도우에서 pip install로 모듈 설치시에 문제가 발생하는 것과 관련하여 질문 드립니다 2 이니스프리 19.12.29.00:51 267
270 [Selenium] 특정 XPath에서 parent 노드의 iframe을 알아낼 수 있을까요? 2 이니스프리 20.01.02.16:04 411
269 Beautifulsoup에서 .find(text=True, recursive=False)과 관련하여 질문 드립니다. 2 이니스프리 20.01.03.23:11 1174
268 해상도는 다르지만 동일한 이미지인지 체크하는 방법이 있을까요? 2 이니스프리 20.01.05.20:52 525
267 이미지 외부링크가 엑박으로 나온다면 어느 부분을 우선적으로 검토해야 될까요? 이니스프리 20.01.05.23:15 658