javascript - 아래 예와 같이 img 요소를 div의 중앙에 배치하는 방법

Question

HTML 코드

으아악

원하는 효과의 예시 사진

빨간색 영역은 p, 녹색 영역은 img

즉, img가 더 넓습니다

img의 너비가 고정되어 있지 않아 margin-left를 수정하여 해결할 수 없습니다

• 4월 20일에 요청함
• 2 댓글
• 답변하도록 초대
• 편집하다
• 더
  • 신고
  • 닫기

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

기본 정렬 시간 정렬

13개 답변

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 3 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

방법이 있는데 img 태그 대신 p.

에 배경 이미지를 추가해 주세요. 으아악

답변 날짜: 4월 20일
댓글
편집

샹씨

평판227

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 1 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

그림 marginleft 위치 지정:-(width/2) img의 너비는 고정되어 있지 않으며 js로 얻은 다음 marginleft를 동적으로 설정할 수 있습니다

• 답변 날짜: 4월 20일
• 댓글
• 편집

차가운 눈으로 세상을 보라177 평판

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 1 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

다른 레이어를 감싸세요.

으아악 으아악

wrapper2的宽度是img宽度。img的margin-left就等于自身宽的一半，相当于left:-50%*width

답변 날짜: 4월 20일
• · 4월 20일 업데이트
2 댓글
편집

toBeTheLight

4.9k 평판

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 1 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

img는 인라인 블록 요소이며 상위 수준에서 직접 텍스트 정렬이 가능합니다: center;

• 5월 3일에 답변됨
• 댓글
• 편집

후강치앙 평판 117

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 1 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

실제로 우리는 수평 센터링 효과를 얻고자 합니다. 다음은 수평 센터링을 달성하는 네 가지 방법입니다. (참고: 아래 각 예에서는 하위 요소의 정렬 작업이 구현되고 하위 요소의 상위 컨테이너는 다음과 같습니다. 상위 요소)

인라인 블록 및 텍스트 정렬을 사용하여 구현

으아악

장점: 좋은 호환성

단점: 자식 요소와 부모 요소를 동시에 설정해야 함

이루려면 margin:0 자동을 사용하세요

으아악

장점: 호환성 좋음

단점: 너비를 지정해야 함

테이블을 사용하여 구현

으아악

장점: 직접 설정만 하면 됩니다.

단점: IE6 및 7에서는 구조를 조정해야 합니다

절대 위치 지정 사용

으아악

단점: 호환성이 좋지 않으며 IE9 이상에서 사용 가능

실용적인 플렉스 레이아웃 구현

첫 번째 방법

으아악

두 번째 방법

으아악

단점: 호환성이 좋지 않고 대면적 레이아웃을 수행할 경우 효율성에 영향을 줄 수 있습니다

5월 5일에 답변됨
댓글
편집

요기27 평판

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 0 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

외부에서 랩핑. img.onload가 실행되면 js는 너비를 계산하여 외부 레이어에 할당합니다. 외부 콘텐츠를 중앙에 배치하세요

답변 날짜: 4월 21일
댓글
편집

Jessica_loli

평판 16

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 0 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

먼저 p에게 position:relative;

를 제공하고 img에게 {
를 제공합니다. 으아악

}

c3와 호환되지 않는 경우 img를 제공할 수 있습니다{
으아악

}

• 답변 날짜: 4월 21일
• 댓글
• 편집

clownzoo11 평판

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 0 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

1

으아악

2

으아악

3

으아악

4 플렉스 사용

답변 날짜: 4월 21일
• · 4월 21일 업데이트
댓글
편집

바람 속의 외로운 늑대

227 평판

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 0 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

사진 크기를 제한하기 위해 외부에 p 한 겹, 안쪽에 p 한 겹

• 5월 3일에 답변됨
• 댓글
• 편집

후지니시22 평판

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 0 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

호환성 문제를 고려하지 않는다면 살펴보셔도 됩니다

object-fit

5월 3일에 답변됨
댓글
편집

CRIMX

865 평판

댓글 제출

× 댓글은 부분적인 Markdown 구문을 지원합니다: **bold**_italic_[link](http://example.com)> 引用`code`- 목록.
동시에 귀하가 @한 사용자에게도 알림이 전송됩니다.

답변이 도움이 되었으며 참고할 만한 가치가 있습니다 0 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

13

0

0

给我你的怀抱

회신하다

모든 응답(13)

나는 대답할 것이다 닫다

黄舟2017-05-16 13:23:39 13층

방법이 있는데 img 태그 대신 p.

에 배경 이미지를 추가해 주세요. 으아악

좋다 +0

답글 추가 关闭回复

给我你的怀抱

회신하다

仅有的幸福2017-05-16 13:23:39 12층

그림 marginleft 위치 지정:-(width/2) img의 너비는 고정되어 있지 않으며 js로 얻은 다음 marginleft를 동적으로 설정할 수 있습니다

좋다 +0

답글 추가 关闭回复

给我你的怀抱

회신하다

Peter_Zhu2017-05-16 13:23:39 11층

다른 레이어를 감싸세요.

으아아아 으아아아

wrapper2的宽度是img宽度。img的margin-left就等于自身宽的一半，相当于left:-50%*width

좋다 +0

답글 추가 关闭回复

给我你的怀抱

회신하다

洪涛2017-05-16 13:23:39 10층

img는 인라인 블록 요소이며 상위 수준에서 직접 텍스트 정렬이 가능합니다: center;

좋다 +0

답글 추가 关闭回复

给我你的怀抱

회신하다

刘奇2017-05-16 13:23:39 9층

실제로 우리는 수평 센터링 효과를 얻고자 합니다. 다음은 수평 센터링을 달성하는 네 가지 방법입니다. (참고: 아래 각 예에서는 하위 요소의 정렬 작업이 구현되고 하위 요소의 상위 컨테이너는 다음과 같습니다. 상위 요소)

인라인 블록 및 텍스트 정렬을 사용하여 달성

으아악

장점: 좋은 호환성

단점: 자식 요소와 부모 요소를 동시에 설정해야 함

이루려면 margin:0 자동을 사용하세요

으아악

장점: 호환성 좋음

단점: 너비를 지정해야 함

테이블을 사용하여 구현

으아악

장점: 직접 설정만 하면 됩니다.

단점: IE6 및 7에서는 구조를 조정해야 합니다

절대 위치 지정을 사용하여 달성

으아악

단점: 호환성이 좋지 않으며 IE9 이상에서 사용 가능

실용적인 플렉스 레이아웃 구현

첫 번째 방법

으아악

두 번째 방법

으아악

단점: 호환성이 좋지 않아 대면적 레이아웃을 수행할 경우 효율성에 영향을 미칠 수 있음

좋다 +0

답글 추가 关闭回复

给我你的怀抱

회신하다

过去多啦不再A梦2017-05-16 13:23:39 8층

외부에서 랩핑. img.onload가 실행되면 js는 너비를 계산하여 외부 레이어에 할당합니다. 외부 콘텐츠를 중앙에 배치하세요

좋다 +0

답글 추가 关闭回复

给我你的怀抱

회신하다

Ty802017-05-16 13:23:39 7층

먼저 p에게 position:relative;
를 제공하고 img에게 {

를 제공합니다. 으아악

}
c3와 호환되지 않는 경우 img를 제공할 수 있습니다{

으아악

}

좋다 +0

답글 추가 关闭回复

给我你的怀抱

회신하다

仅有的幸福2017-05-16 13:23:39 6층

1

으아악

2

으아악

3

으아악

4 용플렉스

좋다 +0

답글 추가 关闭回复

给我你的怀抱

회신하다

淡淡烟草味2017-05-16 13:23:39 5층

사진 크기를 제한하기 위해 외부에 p 한 겹, 안쪽에 p 한 겹

좋다 +0

답글 추가 关闭回复

给我你的怀抱

회신하다

巴扎黑2017-05-16 13:23:39 4층

호환성 문제를 고려하지 않는다면 살펴보셔도 됩니다object-fit

좋다 +0

답글 추가 关闭回复

给我你的怀抱

회신하다

Answer 1

방법이 있는데 img 태그 대신 p.

에 배경 이미지를 추가해 주세요. 으아악

Answer 2

그림 marginleft 위치 지정:-(width/2) img의 너비는 고정되어 있지 않으며 js로 얻은 다음 marginleft를 동적으로 설정할 수 있습니다

Answer 3

다른 레이어를 감싸세요.

으아아아 으아아아

wrapper2的宽度是img宽度。img的margin-left就等于自身宽的一半，相当于left:-50%*width

Answer 4

img는 인라인 블록 요소이며 상위 수준에서 직접 텍스트 정렬이 가능합니다: center;

Answer 5

실제로 우리는 수평 센터링 효과를 얻고자 합니다. 다음은 수평 센터링을 달성하는 네 가지 방법입니다. (참고: 아래 각 예에서는 하위 요소의 정렬 작업이 구현되고 하위 요소의 상위 컨테이너는 다음과 같습니다. 상위 요소)

인라인 블록 및 텍스트 정렬을 사용하여 달성

으아악

장점: 좋은 호환성

단점: 자식 요소와 부모 요소를 동시에 설정해야 함

이루려면 margin:0 자동을 사용하세요

으아악

장점: 호환성 좋음

단점: 너비를 지정해야 함

테이블을 사용하여 구현

으아악

장점: 직접 설정만 하면 됩니다.

단점: IE6 및 7에서는 구조를 조정해야 합니다

절대 위치 지정을 사용하여 달성

으아악

단점: 호환성이 좋지 않으며 IE9 이상에서 사용 가능

실용적인 플렉스 레이아웃 구현

첫 번째 방법

으아악

두 번째 방법

으아악

단점: 호환성이 좋지 않아 대면적 레이아웃을 수행할 경우 효율성에 영향을 미칠 수 있음

Answer 6

외부에서 랩핑. img.onload가 실행되면 js는 너비를 계산하여 외부 레이어에 할당합니다. 외부 콘텐츠를 중앙에 배치하세요

Answer 7

먼저 p에게 position:relative;
를 제공하고 img에게 {

를 제공합니다. 으아악

}
c3와 호환되지 않는 경우 img를 제공할 수 있습니다{

으아악

}

Answer 8

1

으아악

2

으아악

3

으아악

4 용플렉스

Answer 9

사진 크기를 제한하기 위해 외부에 p 한 겹, 안쪽에 p 한 겹

Answer 10

호환성 문제를 고려하지 않는다면 살펴보셔도 됩니다object-fit