집 > 기사 > 웹 프론트엔드 > CSS 튜토리얼: div를 수직으로 중앙에 배치하는 다양한 방법

CSS 튜토리얼: div를 수직으로 중앙에 배치하는 다양한 방법

高洛峰원래의: 2017-03-13 17:50:421247검색

이 글에서는 여러 줄의 텍스트를 세로로 가운데 맞추는 방법을 비롯해 CSS 튜토리얼에서 p를 세로로 가운데 맞추는 다양한 방법을 주로 자세히 소개하고 있습니다. 관심 있는 친구들은

에서 이야기하고 있는 내용을 참고하시면 됩니다. 이 질문에 어떤 사람들은 CSS에 수직 중앙 정렬을 설정하기 위해 vertical-align 속성 이 있는지 물어볼 수 있습니다. 일부 브라우저가 지원하지 않더라도 약간의 CSS Hack 기술만 하면 됩니다! 여기서 몇 마디 말씀드리자면 CSS에는 실제로 수직 정렬 속성이 있지만 (X)HTML 요소에 valign 속성이 있는 요소(예: <)에만 적용됩니다. ;td>, b4d429308760b6c2d20d6300079ed38e, 63bd76834ec05ac1f4c0ebbeaafb0994 등. e388a4556c0f65e1904146cc1a846bee, 45a2772a6b6107b401db3c9b82c049c2과 같은 요소에는 valign 속성이 없으므로 수직 정렬을 사용할 수 없습니다.

1. 한 줄 세로 가운데 정렬

컨테이너에 텍스트가 한 줄만 있는 경우 가운데 정렬만 하면 비교적 간단합니다. 실제 높이 높이는 줄의 높이 line-height와 같을 수 있습니다.

예:

p {      
        height:25px;      
        line-height:25px;      
        overflow:hidden;      
 }

이 코드는 매우 간단합니다. Overflow:hidden 설정은 나중에 내용이 컨테이너를 초과하지 않도록 하거나 자동 줄 바꿈을 방지하는 데 사용됩니다. 달성된다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 单行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p {   
  height:25px;   
  line-height:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
 }   
  </style>
 </head>
 <body>
  <p>现在我们要使这段文字垂直居中显示！</p>
 </body>
</html>

2. 높이를 알 수 없는 여러 줄 텍스트의 세로 중앙 정렬

콘텐츠의 경우 높이는 조정 가능합니다. 그런 다음 이전 섹션에서 언급한 수평 센터링을 달성하는 데 사용된 마지막 방법을 사용할 수 있습니다. 이는 위쪽 및 아래쪽 패딩 값이 동일하도록 Padding을 설정하는 것입니다. 다시 말하지만, 이것은 수직 중심을 "보는" 방법이며 텍스트가 e388a4556c0f65e1904146cc1a846bee를 완전히 채우도록 만드는 방법일 뿐입니다. 다음과 유사한 코드를 사용할 수 있습니다.

p {      
 padding:25px;      
}

이 방법의 장점은 모든 브라우저에서 실행할 수 있다는 점이며 코드도 매우 간단하지만 이 방법의 전제 조건은 컨테이너의 높이가 확장 가능해야 합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p {   
  padding:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
 }   
  </style>
 </head>
 <body>
  <p><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！   
   p {   
  padding:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
 }

3. 여러 줄 텍스트의 고정 높이 중앙 정렬

이 글의 시작 부분에서 수직 정렬 속성이 CSS는 valign 속성이 있는 (X) HTML 태그 에서만 작동하지만 CSS에는 f5d188ed2c074f8b944552db028f98a1을 시뮬레이션할 수 있는 display 속성도 있으므로 다음을 사용할 수 있습니다. 속성을 사용하여 e388a4556c0f65e1904146cc1a846bee Simulate f5d188ed2c074f8b944552db028f98a1을 사용할 수 있습니다. display:table 및 display:table-cell을 사용할 때 전자는 상위 요소에 설정되고 후자는 하위 요소에 설정되어야 하므로 텍스트에 다른 e388a4556c0f65e1904146cc1a846bee 요소를 추가해야 합니다. 위치 지정 필요:

p#wrap {      
    height:400px;      
 display:table;      
}      
p#content {      
  vertical-align:middle;      
    display:table-cell;      
   border:1px solid #FF0099;      
 background-color:#FFCCFF;      
 width:760px;      
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p#wrap {   
  height:400px;   
  display:table;   
 }   
 p#content {   
  vertical-align:middle;   
  display:table-cell;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
 }   
  </style>
 </head>
 <body>
 <p id="wrap">
  <p id="content"><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！ Webjx.Com    
 p#wrap {   
  height:400px;   
  display:table;   
 }   
 p#content {   
  vertical-align:middle;   
  display:table-cell;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
 }

이 방법은 이상적이지만 안타깝게도 Internet Explorer 6은 디스플레이:테이블 및 디스플레이:테이블-셀을 올바르게 인식하지 못하므로 이 방법은 Internet Explorer 6 이하에서는 사용할 수 없습니다. 글쎄요, 정말 우울하네요! 하지만 다른 방법도 있습니다

4. Internet Explorer에서 해결

Internet Explorer 6 이하에서는 높이 계산. Internet Explorer 6에서 상위 요소 위치 지정 후 하위 요소에 대한 백분율 계산을 하면 계산 기준이 상속되는 것 같습니다(위치 지정 값이 절대값이면 그런 문제는 없으나 백분율 계산 기준을 사용하는 경우) will 더 이상 요소의 높이가 아니라 상위 요소에서 상속된 위치 지정 높이입니다. 예를 들어 다음과 같은 (X)HTML 코드 조각이 있습니다.

<p id="wrap">     
 <p id="subwrap">     
   <p id="content">     
 </p>     
</p>   
</p>

subwrap에서 absolute positioning을 수행하면 콘텐츠도 이 속성을 상속하지만 그렇지는 않습니다. 페이지에 즉시 표시되지만 콘텐츠를 상대적으로 배치하면 사용하는 100% 비율은 더 이상 콘텐츠의 원래 높이가 되지 않습니다. 예를 들어, 하위 랩의 위치를 40%로 설정합니다. 콘텐츠의 위쪽 가장자리가 랩과 일치하도록 하려면 top:-80%; , 하위 랩의 top:50%를 설정할 때 콘텐츠를 원래 위치로 되돌리려면 100%를 사용해야 하지만 콘텐츠도 50%로 설정하면 어떻게 될까요? 그러면 정확히 수직 중앙에 놓이게 됩니다. 따라서 이 방법을 사용하여 Internet Explorer 6에서 수직 중앙 정렬을 구현할 수 있습니다.

p#wrap {      
    border:1px solid #FF0099;      
 background-color:#FFCCFF;      
 width:760px;      
  height:400px;      
 position:relative;      
}      
p#subwrap {      
  position:absolute;      
    border:1px solid #000;      
    top:50%;      
}      
p#content {      
    border:1px solid #000;      
    position:relative;      
    top:-50%;      
}

当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:400px;   
  position:relative;   
 }   
 p#subwrap {   
  position:absolute;   
  top:50%;   
 }   
 p#content {   
  position:relative;   
  top:-50%;   
 }   
  </style>
 </head>
 <body>
 <p id="wrap">
  <p id="subwrap">
   <p id="content"><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！   
 p#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:500px;   
  position:relative;   
 }   
 p#subwrap {   
  position:absolute;   
  border:1px solid #000;   
  top:50%;   
 }   
 p#content {   
  border:1px solid #000;   
  position:relative;   
  top:-50%;   
 }

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可

以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

p#wrap {      
    display:table;      
    border:1px solid #FF0099;      
 background-color:#FFCCFF;      
 width:760px;      
  height:400px;      
 _position:relative;      
   overflow:hidden;      
}      
p#subwrap {      
    vertical-align:middle;      
    display:table-cell;      
   _position:absolute;      
   _top:50%;      
}      
p#content {      
   _position:relative;      
   _top:-50%;      
}

至此，一个完美的居中方案就产生了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p#wrap {   
  display:table;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:400px;   
  _position:relative;   
  overflow:hidden;   
 }   
 p#subwrap {   
  vertical-align:middle;   
  display:table-cell;   
  _position:absolute;   
  _top:50%;   
 }   
 p#content {    
  _position:relative;   
  _top:-50%;   
 }   
  </style>
 </head>
 <body>
 <p id="wrap">
  <p id="subwrap">
   <p id="content"><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！   
 p#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:500px;   
  position:relative;   
 }   
 p#subwrap {   
  position:absolute;   
  border:1px solid #000;   
  top:50%;   
 }   
 p#content {   
  border:1px solid #000;   
  position:relative;   
  top:-50%;   
 }

以上就是本文的全部内容，希望对大家的学习有所帮助。

위 내용은 CSS 튜토리얼: div를 수직으로 중앙에 배치하는 다양한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：부동을 지우기 위해 DIV+CSS를 공유하는 일반적인 방법 요약다음 기사：부동을 지우기 위해 DIV+CSS를 공유하는 일반적인 방법 요약