이미지는 모든 웹 애플리케이션에서 중요한 부분입니다. 웹 애플리케이션에 많은 이미지를 포함하는 것은 일반적으로 권장되지 않지만 필요할 때마다 이미지를 사용하는 것이 중요합니다. CSS는 웹 애플리케이션에서 이미지 표시를 제어하는 데 도움이 됩니다.
이미지를 정렬한다는 것은 이미지를 중앙, 왼쪽, 오른쪽에 배치하는 것을 의미합니다. 우리는 뜨다 재산과 텍스트 정렬 이미지 정렬 속성입니다.
이미지가 div 요소에 있으면 다음을 사용할 수 있습니다. 텍스트 정렬 div에서 이미지를 정렬하는 속성입니다.
예
이 예에서는 다음을 사용하여 이미지를 정렬합니다. 텍스트 정렬 재산. 이미지는 div 요소에 있습니다.
div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> 지금 테스트해보세요 산출
부동 속성 사용
CSS float 속성은 위치 지정 속성입니다. 요소를 왼쪽이나 오른쪽으로 밀어서 다른 요소가 그 요소를 둘러쌀 수 있도록 하는 데 사용됩니다. 일반적으로 이미지 및 레이아웃과 함께 사용됩니다.
요소는 수평으로만 부동됩니다. 따라서 요소를 위나 아래가 아닌 왼쪽이나 오른쪽으로만 부동시킬 수 있습니다. 부동 요소는 가능한 한 왼쪽이나 오른쪽으로 이동할 수 있습니다. 간단히 말해서, 부동 요소가 맨 왼쪽이나 맨 오른쪽에 표시될 수 있음을 의미합니다.
예
img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> 지금 테스트해보세요 산출
