가변 크기의 CSS 이미지 센터링 방법

CSS는 프론트엔드 개발에 없어서는 안될 언어입니다. 이번 글에서는 가변크기의 이미지 센터링 방식의 CSS 센터링 예제를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 공유해보겠습니다. 참조. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. 테이블 셀을 사용하여 수직 센터링을 구현합니다.

<p class="box1">
    [站外图片上传中……(5)]
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box1{
  text-align:center;
  display: table-cell;
  vertical-align: middle;
  /* font-size: 118px; */
}
img{
  vertical-align: middle;
}

상위 요소를 사용하여 디스플레이의 수직 센터링을 구현합니다. 테이블 셀 유형은 ie8+ 브라우저와 함께 제공됩니다. 세로 중앙에 있는 속성입니다.

참고: img{vertical-align: middle;}은 단지 디스플레이:인라인 블록 유형의 기준선 정렬 문제를 제거하기 위한 것입니다.

2. 여러 줄의 텍스트를 세로로 가운데 정렬하는 방법

때로는 여러 줄의 텍스트를 세로로 가운데 정렬해야 하는 상황이 발생할 수 있지만 때로는 그렇게 하기가 번거롭고 생각을 바꿔야 합니다. 그것을 달성하기 위해.

<p class="box3">
    <span>你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据</span>
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box3{
  display: table-cell;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
}

내부 텍스트를 스팬 태그로 감싸고(다른 태그도 허용됨) 스팬 태그를 인라인 블록으로 설정한 다음 이미지를 세로로 가운데에 배치합니다(ie8+).

관련 권장 사항:

CSS를 사용하여 이미지를 중앙에 배치하는 세 가지 방법

HTML 코드를 사용하여 텍스트와 이미지를 중앙에 배치하는 방법은 무엇입니까?

CSS 이미지를 중앙에 배치하는 방법

위 내용은 가변 크기의 CSS 이미지 센터링 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!