> 웹 프론트엔드 > HTML 튜토리얼 > CSS实现元素垂直居中_html/css_WEB-ITnose

CSS实现元素垂直居中_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:38:27
원래의
1108명이 탐색했습니다.

CSS实现元素垂直居中

对元素的垂直居中针对于单行元素和多行元素将分情况讨论。

一、父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
HTML结构:

<div class="container">  Hello World!!!</div>
로그인 후 복사

CSS样式:

<style>  .container{    height:100px;    line-height:100px;    background:#999;  }</style>
로그인 후 복사

二、父元素高度不确定的多行文本

对于父元素高度不确定的文本、图片等的块级元素的竖直居中可以设置相同的上下内边距(padding值)即可实现居中,这个数值不必过大。

三、父元素高度确定的多行文本

多行文本,图片,块级元素皆属于这种情况,对此的垂直居中主要有两种方法。

1.插入 table

对要垂直居中的元素外插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
另需注意,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。
HTML结构:

<body>  <table>    <tbody>      <tr>        <td class="wrap">          <div>            <p>Hello World!!!</p>            <p>Hello World!!!</p>            <p>Hello World!!!</p>            <p>Hello World!!!</p>            <p>Hello World!!!</p>          </div>        </td>      </tr>    </tbody>  </table></body>
로그인 후 복사

CSS样式:

table td{height:500px;background:#ccc}
로그인 후 복사

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

2.设置块级元素的 display 为 table-cell

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
HTML结构:

<div class="container">  <div>    <p>Hello World!!!</p>    <p>Hello World!!!</p>    <p>Hello World!!!</p>    <p>Hello World!!!</p>    <p>Hello World!!!</p>  </div></div>
로그인 후 복사

CSS样式:

<style>  .container{    height:300px;    background:#ccc;    display:table-cell;    vertical-align:middle;  }</style>
로그인 후 복사

这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿