我正在尝试使用table-cell方式垂直和水平居中div。
它在我使用以下代码时有效:
div { display: table; } .logo { display: table-cell; position: absolute; vertical-align: middle; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
但我宁愿将.logo包装在另一个名为.center的div中,就像这里JSFiddle一样,但出于某种原因,尽管它在JSfiddle中有效,但它在我的网站上并不适合我。
解决方法
这是一个很好的起点。
HTML:
<div class="containing-table"> <div class="centre-align"> <div class="content"></div> </div> </div>
CSS:
.containing-table { display: table; width: 100%; height: 400px; /* for demo only */ border: 1px dotted blue; } .centre-align { padding: 10px; border: 1px dashed gray; display: table-cell; text-align: center; vertical-align: middle; } .content { width: 50px; height: 50px; background-color: red; display: inline-block; vertical-align: top; /* Removes the extra white space below the baseline */ }
请参阅演示:http://jsfiddle.net/audetwebdesign/jSVyY/
.containing-table为.centre-align(表格单元格)建立宽度和高度上下文。
您可以根据需要应用text-align和vertical-align来改变.centre-align。
原文地址:https://www.jb51.cc/html/232555.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。