한 번에 두 개의 DIV 중앙에 이미지 배치

user3811050

두 div (클래스 이름 ca1 및 ca2 포함)가 있으며 jquery를 사용하여 두 div의 중앙에 이미지 (veer.jpg)를 배치하고 싶습니다.이 작업에 성공했지만 한 번에 하나의 사진 만 배치 할 수 있습니다. 중앙에서, 예를 들어 ca1에 jquery 함수를 사용하면 제대로 작동하지만 동시에 ca2에 jquery 함수를 사용하면 작동하지 않습니다. 이제 ca1에 대한 함수를 삭제하고 이제 ca2에 jquery 함수를 사용하면 이것은 잘 작동합니다. 한 번에 두 div에 대해 jquery 함수를 사용할 수 없습니다. 누구든지 제발 도와 줄 수 있습니까?

내 html 페이지는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="css/hwcb.css">
</head>
<body>
<div class="ca1"style="height:600px; width:600px; top:100px; left:400px; position:absolute; background:pink;">
<img class="c1"  src="veer.jpg" style="height:200px; position:absolute;" />
</div>
<div class="ca2"style="height:600px; width:400px; top:800px; left:400px;position:absolute; background:grey;">
<img class="c2"  src="veer.jpg" style="height:200px; position:absolute;" />
</div>

<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>

내 main.js 페이지는 다음과 같습니다.

$(document).ready(function(){function move_div(){window_width=$('.ca1').width();window_height=$('.ca1').height();obj_width=$('.c1').width();obj_height=$('.c1').height();$('.c1').css('top',(window_height/2)-(obj_height/2)).css('left', (window_width/2)-(obj_width/2));}move_div();$(div).resize(function(){move_div();});});

$(document).ready(function(){function move_div(){window_width=$('.ca2').width();window_height=$('.ca2').height();obj_width=$('.c2').width();obj_height=$('.c2').height();$('.c2').css('top',(window_height/2)-(obj_height/2)).css('left', (window_width/2)-(obj_width/2));}move_div();$(div).resize(function(){move_div();});});
Tasos Vogiatzoglou

대신에

$(div).resize(function(){move_div();});})

시험

$('.ca1').resize(move_div)

이제 모든 div에 대한 핸들러를 추가하고 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

div 내에서 두 이미지 중앙에 배치

분류에서Dev

상단 중앙을 향한 div 뒤에 이미지 배치

분류에서Dev

div 내부의 배경 이미지 중앙에 배치

분류에서Dev

두 개의 페이딩 이미지를 중앙에 배치하는 방법

분류에서Dev

div 태그의 이미지 중앙에 배치

분류에서Dev

div의 모든 이미지를 CSS 중앙에 배치

분류에서Dev

div에 2 개의 이미지가있는 경우 1 개의 이미지 만 중앙에 배치

분류에서Dev

두 개의 절대 div 사이에 div를 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

css는 div의 두 입력을 중앙에 배치합니다.

분류에서Dev

특정 너비 (CSS)의 테두리 이미지 요소 중앙에 배치

분류에서Dev

레이아웃 중앙에 두 개의 이미지를 배치 할 수 없습니다.

분류에서Dev

div 내부의 이미지를 중앙에 배치 할 수 없습니다.

분류에서Dev

div 내에서 ul 중앙에 배치 (이미 페이지 중앙에 있음)

분류에서Dev

바닥 글 내부의 두 부동 div 사이에 인라인 블록 div 중앙에 배치

분류에서Dev

css는 중앙과 중앙의 div에 배경이있는 범위를 배치

분류에서Dev

9 개의 가능한 위치에 두 개의 이미지가있는 div를 갖는 방법

분류에서Dev

9 개의 가능한 위치에 두 개의 이미지가있는 div를 갖는 방법

분류에서Dev

이 이미지를 div에 중앙에 배치하는 방법

분류에서Dev

많은 양의 div를 페이지 중앙에 배치

분류에서Dev

DIV에서 더 큰 이미지 중앙에 배치

분류에서Dev

두 이미지를 중앙에 배치하는 방법

분류에서Dev

고정 된 div, div를 이미지와 동일한 크기로 중앙에 배치

분류에서Dev

이미지 중앙에 div를 배치하십시오.

분류에서Dev

두 버튼 사이의 뷰 중앙에 배치

분류에서Dev

Android에서 두 개의 뷰 블록 중앙에 배치

분류에서Dev

div로 래핑 한 후 이미지를 중앙에 배치 할 수 없습니까? HTML

분류에서Dev

다른 div의 수직 중앙에 div 치찰음을두기

분류에서Dev

다른 div의 이미지로 div를 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

나란히있는 두 개의 ImageView 중앙에 배치

Related 관련 기사

  1. 1

    div 내에서 두 이미지 중앙에 배치

  2. 2

    상단 중앙을 향한 div 뒤에 이미지 배치

  3. 3

    div 내부의 배경 이미지 중앙에 배치

  4. 4

    두 개의 페이딩 이미지를 중앙에 배치하는 방법

  5. 5

    div 태그의 이미지 중앙에 배치

  6. 6

    div의 모든 이미지를 CSS 중앙에 배치

  7. 7

    div에 2 개의 이미지가있는 경우 1 개의 이미지 만 중앙에 배치

  8. 8

    두 개의 절대 div 사이에 div를 중앙에 배치하는 방법은 무엇입니까?

  9. 9

    css는 div의 두 입력을 중앙에 배치합니다.

  10. 10

    특정 너비 (CSS)의 테두리 이미지 요소 중앙에 배치

  11. 11

    레이아웃 중앙에 두 개의 이미지를 배치 할 수 없습니다.

  12. 12

    div 내부의 이미지를 중앙에 배치 할 수 없습니다.

  13. 13

    div 내에서 ul 중앙에 배치 (이미 페이지 중앙에 있음)

  14. 14

    바닥 글 내부의 두 부동 div 사이에 인라인 블록 div 중앙에 배치

  15. 15

    css는 중앙과 중앙의 div에 배경이있는 범위를 배치

  16. 16

    9 개의 가능한 위치에 두 개의 이미지가있는 div를 갖는 방법

  17. 17

    9 개의 가능한 위치에 두 개의 이미지가있는 div를 갖는 방법

  18. 18

    이 이미지를 div에 중앙에 배치하는 방법

  19. 19

    많은 양의 div를 페이지 중앙에 배치

  20. 20

    DIV에서 더 큰 이미지 중앙에 배치

  21. 21

    두 이미지를 중앙에 배치하는 방법

  22. 22

    고정 된 div, div를 이미지와 동일한 크기로 중앙에 배치

  23. 23

    이미지 중앙에 div를 배치하십시오.

  24. 24

    두 버튼 사이의 뷰 중앙에 배치

  25. 25

    Android에서 두 개의 뷰 블록 중앙에 배치

  26. 26

    div로 래핑 한 후 이미지를 중앙에 배치 할 수 없습니까? HTML

  27. 27

    다른 div의 수직 중앙에 div 치찰음을두기

  28. 28

    다른 div의 이미지로 div를 중앙에 배치하는 방법은 무엇입니까?

  29. 29

    나란히있는 두 개의 ImageView 중앙에 배치

뜨겁다태그

보관