ホームページ >php教程 >php手册 >垂直/水平居中

垂直/水平居中

WBOY
WBOYオリジナル
2016-06-07 11:45:271146ブラウズ

垂直/水平居中的几种方法:
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 までご連絡ください。