CSS를 사용하여 텍스트와 이미지를 수직 및 수평 중앙에 배치하는 방법 정보

CSS를 사용하여 텍스트와 이미지의 수직 및 수평 중앙 정렬에 대해

저는 항상 좋은 기억이 나쁜 펜보다 나쁘다고 믿어 왔습니다. 수직 센터링을 사용하는 많은 사람들이 나중에 참고할 수 있도록 정리하겠습니다.

1. 텍스트를 수직 및 수평으로 중앙에 배치합니다.

1. 텍스트를 수평으로 중앙에 배치합니다.

텍스트를 수평으로 중앙에 배치하는 방법은 말할 것도 없습니다. 텍스트 정렬 사용: 중앙;.

---

2. 세로 가운데 맞춤:

　1) 간단한 한 줄 텍스트

　 줄 사용 -height==height, 한 줄을 만듭니다. 텍스트가 세로로 가운데 정렬됩니다. ㅋㅋㅋ

Use

테이블

요소, 블록 수준 상위 요소

display
: 테이블;

인라인 요소

display: table-cell

vertical-align

: middl

e 레벨)

---

1 e388a4556c0f65e1904146cc1a846bee
2     垂直水平居中
3 94b3e26ee717c64999d7867364b1b4a3

위치 지정+ trans

for

m:translateY(-50%); 너비 및 고정 높이의 경우 상위 요소는 상위 요소 높이에서 하위 요소 높이

1 p{
2     width: 200px;
3     height: 200px
4     text-align: center;
5     line-height: 200px;
6     background:#1AFF00;7 }

의 절반을 뺀 값인

padding

값을 사용합니다. 둘 다 고정 너비와 고정 높이이며 상위 요소는 overflow를 사용합니다. (css 해킹) 하위 요소는 여백 값을 사용합니다. 이 값은 상위 요소 높이에서 하위 요소 높이의 절반을 뺀 값입니다. 효과는 다음과 같습니다: , 수평 센터링　1) img는 인라인 블록 요소인 CSS의 초기 설정에서 인라인 블록입니다. 수평으로 센터링하려면 텍스트 정렬을 사용하세요. center;

　

2) img 요소를 블록 수준 요소로 변환하려면 margin:0 auto;를 사용하세요. 데모 사진

e388a4556c0f65e1904146cc1a846bee垂直水平居中94b3e26ee717c64999d7867364b1b4a3

　 Line-height==height 수직 정렬: 중간;

1 p{
2     width: 200px;
3     height: 200px;
4     text-align: center;
5     line-height: 200px;
6     background:#00ABFF;7 
}

　display: table-cell;vertical-align: middle;

1 8cfb616408c43fb55cbe9d0aaf186081国际《儿童权利公约》界定的儿童系指18岁以下的任何人54bdf357c58b8a65c66d7c19c8e4d114
3 94b3e26ee717c64999d7867364b1b4a3

display: table-cell;vertical-align : middle; text-align: center;

 1 p{ 
 2     width: 200px; 
 3     height: 200px; 
 4     display: table; 
 5     background:#1AFF00; 
 6 } 
 7 span{ 
 8     display: table-cell; 
 9     vertical-align: middle;10 }

　Positioning+display: block;transform:translate(-50%,-50%);

1 e388a4556c0f65e1904146cc1a846bee
2     e388a4556c0f65e1904146cc1a846bee国际《儿童权利公约》界定的儿童系指18岁以下的任何人94b3e26ee717c64999d7867364b1b4a3
3 94b3e26ee717c64999d7867364b1b4a3

　Positioning+margin 음수값

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
}

　　定位+margin: auto;

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

　　 overflow: hidden;margin值

p{
    width: 198px;
    height: 198px;
    overflow: hidden;
    border: 1px solid #8900FF;
}
img{ 8     margin: 25px;
}

　　padding值

 p{
 2     padding: 25px;
 3     width: 148px;
 4     height: 148px;
 5     border: 1px solid #8900FF;
 6 }

　　用table的属性+vertical-align: middle;实现

1 <p>2     <span><img alt="" src="1.jpg" /></span>3 </p>

p{
    display: table;
    width: 198px;
    height: 198px;
    text-align: center;
    border: 1px solid #8900FF;
}
span{
    display:table-cell;
    vertical-align: middle;
}

　　用background实现

1 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

1 p{
2     width: 198px;
3     height: 198px;
4     border: 1px dashed #8900FF;
5     background: url(1.jpg) no-repeat center center;
6 }

　　效果如下：

　　

 原文来自：http://www.cnblogs.com/Ni-F/p/6937931.html 感谢作者分享！

위 내용은 CSS를 사용하여 텍스트와 이미지를 수직 및 수평 중앙에 배치하는 방법 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!