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

垂直/水平居中

WBOY
WBOY原創
2016-06-07 11:45:271140瀏覽

垂直/水平居中的几种方法:
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元

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn