집 > 기사 > 웹 프론트엔드 > HTML의 가로 및 세로 가운데 맞춤 문제

HTML의 가로 및 세로 가운데 맞춤 문제

高洛峰원래의: 2017-02-24 10:41:261389검색

최근 센터링 문제가 많아서 나중에 쉽게 찾아볼 수 있도록 여기에 정리하는 시간을 가졌습니다

<p class="wrap">
      我在中间……
</p>
.. height+line-height+text-center（只能居中单行）
.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center;
    line-height: px;
}

ps:text-align:center는 인라인 요소를 요소 아래의 중앙에 배치합니다.
1.2display:table -cell (고정 높이의 여러 행 및 중앙 정렬)

.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center; 
    display:table-cell; 
    vertical-align: middle;
}

display:table-cell：ie67不管用,最好配合display:table;一起用

ie67: (앞으로는 사용하지 않겠지만, 여기에 넣을게요)
방법 1: (em 태그의 높이가 상위 태그의 높이와 동일하므로 centeringspan과 em은 상위 태그의 centeringspan과 같습니다.)

<p class="wrap">
   <span>
       我在中间…… 我在中间…… 我在中间…… 我在中间……
   </span>
   <em></em>
</p>
 .wrap{
     width:px; 
     height:px;
     border:px solid red; 
     text-align: center;
 }
 .wrap span{
     vertical-align: middle;
     display:inline-block; 
    width:px;
}
.wrap em{
    height:%;
    vertical-align: middle; 
    display:inline-block;
}

방법 2: (절대 위치에 있는 상위 태그를 하위 요소에 추가한 다음 하위 요소의 상대적 위치를 일치시켜 수평 및 수직 중앙에 배치)

<p class="wrap">
    <span class="span">
       <span class="span">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>
    </span>
</p>
 .wrap{
     width:px; 
     height:px;
     border:px solid red;
     display:table;
     position:relative; 
     overflow: hidden;
 }
 .wrap .span{
    display:table-cell; 
    vertical-align: middle; 
    text-align: center;
    *position:absolute;
    top:%;
    left:%;
}
.wrap .span{
    *position:relative;
    top:-%;
    left:-%;
}

1.3padding(내부패딩, 말할 것도 없이)

.wrap{
    width:px;
    border:px solid red;
    padding:px ;
}

2. 중앙 요소

<p class="wrap">
    <span></span>
</p>

2.1position:absolute+margin 음수 값(너비와 높이가 가능해야 함) 여백 계산)

 .wrap{
     width:px; 
     height:px;
     position:absolute; 
     top:%; 
     left:%; 
     margin-top:-px; 
     margin-left:-px;
     border:px solid red;
}
.wrap span{ 
    width:px; 
    height:px; 
    background:red;
    position: absolute; 
    top:%; 
    left:%; 
    margin-top:-px; 
    margin-left:-px;
}

ps: CSS는 p 수평 센터링과 상하 수직 센터링을 구현합니다

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>上下垂直居中 在线演示 pCSS5</title>  
<style>  
#main {  
   position: absolute;  
   width:400px;  
   height:200px;  
   left:50%;  
   top:50%;  
   margin-left:-200px;  
   margin-top:-100px;  
   border:1px solid #00F  
}  
/*css注释：为了方便截图，对CSS代码进行换行*/  
</style>  
</head>  
<body>  
   <p id="main">p水平居中和上下垂直居中<a href="http://www.pcss5.com/">pCSS5</a></p>  
</body>  
</html>

수평 및 수직 센터링 원리 소개
여기에서는 절대값이 사용됩니다. 위치 위치: 절대값, 왼쪽 및 위쪽을 사용하여 개체의 위쪽과 왼쪽 사이의 거리를 50으로 설정합니다. %이지만 50%로 설정하면 상자가 실제로 중앙에 위치하지 않으므로 margin-left:-200px; margin-top:-100px ;를 설정합니다. 여기서 중요한 점은 margin-left 값이 절반이라는 것입니다. width, margin-top 값도 객체 높이의 절반이면서 동시에 음수로 설정되어 수평 및 수직 센터링이 달성됩니다.

html의 가로 및 세로 가운데 정렬 문제와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：HTML常用标签及html标签的特点다음 기사：HTML设计模式笔记整理

HTML의 가로 및 세로 가운데 맞춤 문제

관련 기사