> php教程 > php手册 > 垂直/水平居中

垂直/水平居中

WBOY
풀어 주다: 2016-06-07 11:45:27
원래의
1145명이 탐색했습니다.

垂直/水平居中的几种方法:
1.[原理] 设定宽度和高度,父节点为 position:relative; CSS是这样写的:position:absolute;left:50%;top:50%;<br> margin-left:-元素自身宽度的一半;<br> margin-top:-元素自身高度的一半;2.[原理] table, 用起来就更简单了, 只要添加:text-algin:center;<br> vertical-align:middle;[方法] 提供模板化的CSS class方法, 规则如下:<div> <!-- 记得加宽度, 不要写行内样式, 这里只是一个提示 --><br>  <div> <br>          <div> <br>                <a><img alt="垂直/水平居中" ></a><br>          </div> <br>  </div> <br> </div> <!-- .sl-hvalign -->样式:.sl-hvalign{<br>     display:table;<br>     overflow:hidden;<br>     margin:0 auto;<br>     height: 100%;<br>     *position:relative;<br> }<br> <br> .sl-hvalign-cnt{<br>     display:table-cell;<br>     vertical-align: middle;<br>     *position:absolute;<br>     top:50%;<br> }<br> <br> .sl-hvalign-cnt-inner{<br>     *position:relative;<br>     *top:-50%;<br> }

AD:真正免费,域名+虚机+企业邮箱=0元

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