HTML 코드 {code...} 원하는 효과의 예 빨간색 영역이 div이고, 녹색 영역이 img입니다. 즉, img의 너비가 고정되어 있지 않으므로 해결할 수 없습니다. 여백 왼쪽 수정.

javascript - 아래 예와 같이 img 요소를 div의 중앙에 배치하는 방법-PHP 중국어 네트워크 Q&A

HTML 코드

으아악

원하는 효과의 예시 사진

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

즉, img가 더 넓습니다

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

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

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

기본 정렬 시간 정렬

13개 답변

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

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

샹씨

평판227

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

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

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

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

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

다른 레이어를 감싸세요.

으아악 으아악

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

· 4월 20일 업데이트

toBeTheLight

4.9k 평판

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

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

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

후강치앙 평판 117

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

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

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

으아악

장점: 좋은 호환성

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

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

으아악

장점: 호환성 좋음

단점: 너비를 지정해야 함

테이블을 사용하여 구현

으아악

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

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

절대 위치 지정 사용

으아악

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

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

첫 번째 방법

으아악

두 번째 방법

으아악

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

요기27 평판

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

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

Jessica_loli

평판 16

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

먼저 p에게 position:relative;

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

}

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

}

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

clownzoo11 평판

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

으아악

4 플렉스 사용

· 4월 21일 업데이트

바람 속의 외로운 늑대

227 평판

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

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

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

후지니시22 평판

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

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

object-fit

CRIMX

865 평판

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

给我你的怀抱

모든 응답(13)

左手右手慢动作2017-05-16 13:23:39 3층

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

좋다 +0

답글 추가

大家讲道理2017-05-16 13:23:39 2층

css:

으아악

html:

으아악

좋다 +0

답글 추가

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

위치 + 변형

좋다 +0

답글 추가