CSS는 웹 애플리케이션에서 이미지 표시를 제어하는 데 도움이 됩니다. 이미지나 텍스트를 중앙에 배치하는 것은 CSS의 일반적인 작업입니다. 이미지를 중앙에 배치하려면 다음 값을 설정해야 합니다. 여백 왼쪽 그리고 여백 오른쪽 에게 자동 다음을 사용하여 블록 요소로 만듭니다. 디스플레이: 블록; 재산.
이미지가 div 요소에 있으면 다음을 사용할 수 있습니다. 텍스트 정렬: 중앙; div의 중앙에 이미지를 정렬하는 속성입니다.
자바 불변 목록
그만큼 요소는 다음을 적용하여 쉽게 중앙에 배치할 수 있는 인라인 요소라고 합니다. 텍스트 정렬: 중앙; CSS의 속성을 이를 포함하는 상위 요소에 추가합니다.
참고: 너비가 100%(전체 너비)로 설정된 경우 이미지를 중앙에 맞출 수 없습니다.
단축 속성을 사용할 수 있습니다. 여유 그리고 그것을로 설정 자동 이미지를 중앙에 맞추는 대신 여백 왼쪽 그리고 여백 오른쪽 재산.
적용하여 이미지를 중앙에 배치하는 방법을 살펴보겠습니다. 텍스트 정렬: 중앙; 속성을 상위 요소에 추가합니다.
예
이 예에서는 다음을 사용하여 이미지를 정렬합니다. 텍스트 정렬: 중앙; 재산. 이미지는 div 요소에 있습니다.
역참조 포인터
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> 지금 테스트해보세요 산출
예
이제 우리는 여백 왼쪽: 자동; 여백 오른쪽: 자동; 그리고 디스플레이: 블록; 이미지를 중앙에 정렬하는 속성입니다.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } 지금 테스트해보세요 산출
안드로이드에서 유튜브 광고를 차단하는 방법
