CSS를 사용하여 이미지 위치 조작

소개

저는 꽤 오랫동안 CSS와 HTML을 사용해 왔지만 솔직히 텍스트와 함께 컨테이너 내에서 이미지를 세로로 가운데에 배치하는 문제에 직면한 적이 없다는 사실에 놀랐습니다. 이미지 위치를 자체적으로 조작하고 텍스트 위치를 조작하는 것은 매우 쉽습니다. 두 가지를 함께 조작하는 것도 쉽습니다. 제가 하고 싶었던 것은 이미지와 텍스트를 같은 컨테이너에 넣고, 이미지를 왼쪽 정렬하고, 헤더를 가운데 정렬하는 것이었습니다.

도전

제가 사용한 텍스트는 HTML 요소

요소는 인라인 요소입니다. 이는 같은 줄에서 다른 사람들과 함께 플레이할 수 있다는 것을 의미합니다. 물론 CSS float 속성을 가지고 놀 수도 있지만 문제가 있습니다. 요소에 float를 도입하는 순간 해당 요소가 문서 흐름에서 제외됩니다. 해당 요소의 동작을 제어하기가 어려워집니다.

옵션

앞서 언급했듯이 float: left 및 float: inline-start를 사용해 보았지만 항상 원하는 대로 작동하지는 않습니다. 모범 사례로서 저는 최신 기술을 최대한 사용하려고 노력하고 있으며 여기에 최신 Flex와 CSS GridBox가 등장했습니다. Flexbox는 상위 컨테이너에 할당되면 아래와 같이 모든 콘텐츠 텍스트를 왼쪽에 정렬합니다.

많은 시행착오 끝에 특이성을 활용하고 미니멀리스트로 가는 결론에 이르렀습니다. 또한 핵심 img 요소에 스타일을 적용하지 않도록 사이트에서 독립적으로 사용할 수 있는 이미지 스타일을 지정할 수 있는 옵션도 갖고 싶었습니다. 이미지를 조작하기 위해 여러 클래스를 만들고 이를 적용했습니다. 이 모든 시행착오 동안 또 다른 문제가 나를 괴롭혔다. 내가 알고 있는 모든 기술을 사용하여 이미지를 상위 컨테이너의 중앙에 정렬할 수 없었습니다. 나는 align-self 속성을 연구하고 시도했습니다. 마침내 성공했습니다. 나는 이것을 핵심 img 요소에 적용하고 싶지 않았고 이에 대한 클래스를 만들고 싶지 않았기 때문에 Child Combinator를 사용하여 헤더 요소(header > img)의 하위인 특정 img 요소를 대상으로 지정했습니다. . 이로써 이미지 정렬 문제가 해결되었습니다.

다음 문제는 헤더 텍스트를 중앙에 정렬하는 것이었습니다. 나는 text-align, align-self, align-items, justify-self 및 justify-items에 대해 내가 알고 있는 모든 트릭을 시도했습니다. 그러나 상위 헤더 요소가 flex로 표시되었기 때문에 후속 스타일이 적용되지 않았습니다. 마지막으로 margin: auto를 사용하여 콘텐츠를 중앙에 배치하는 간단한 방법을 시도했는데 그 방법이 성공했습니다. 이제 최종 출력은 다음과 같습니다.

헤더 컨테이너의 높이를 변경해도 이미지와 텍스트는 요소 중앙에 수직으로 위치하며 x축 위치에 유지됩니다.

최종 코드

HTML 코드:

<header class="flexi">
  <img class="round-img small lazy" src="/static/imghwm/default1.png" data-src="img/Mukul-2019.jpg" alt="Mukul Dharwadkar" caption="Picture of Mukul Dharwadkar">
  <h1 class="center-align">
    Mukul Dharwadkar
  </h1>
</header>

CSS 코드:

header {
    width: 900px;
    margin: auto;
    height: 120px;
    background-color: antiquewhite;
  }

/* The CSS rule below is highly specific for an img element that is a child of the header element.
Typically there will be only one img element inside the header and therefore this is safe to keep */

header > img {
  align-self: center;
}

.flexi {
  display: flex;
}

.round-img {
  border-radius: 50%;
}

.small {
  width: 100px;
}

.flexi {
  display: flex;
}

.center-align {
  margin: auto;
}

전체 코드는 내 Github 저장소에 있습니다. 마음껏 사용해 보세요.

결론:

웹 디자인에서 이미지와 텍스트를 완벽하게 정렬하려면 다양한 CSS 기술을 실험해야 하는 경우가 많습니다. 이 경우 Flexbox는 스타일을 독립적으로 조정할 수 있는 유연성을 유지하면서 컨테이너 내에서 콘텐츠를 중앙에 배치하는 가장 효율적이고 현대적인 솔루션임이 입증되었습니다. Child Combinator와 같은 타겟 선택기를 사용하고 Flexbox의 정렬 속성을 활용함으로써 문제를 깔끔하고 효율적으로 해결할 수 있었습니다. 이 방법은 코드를 간소화할 뿐만 아니라 향후 조정을 더 쉽게 관리할 수 있도록 해줍니다. CSS는 까다로울 수 있지만 올바른 접근 방식을 사용하면 세련되고 전문적인 레이아웃을 만들 수 있습니다.

위 내용은 CSS를 사용하여 이미지 위치 조작의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!