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 답변이 도움이 되지 않습니다. 질문에 대한 답변이 아닙니다.

给我你的怀抱2713일 전1701

Answer 1

상위 요소에 테이블 셀 표시를 제공한 다음 더 일반적인 텍스트 정렬 및 수직 정렬을 설정합니다

Answer 2

css:

으아악

---

html:

으아악

Answer 3

위치 + 변형