参见英文答案 >
How to center an element horizontally and vertically?10个
我正在以父div为中心的图标(垂直和水平).我的页面上有很多不同大小的父div,所以我希望能够按比例将图标放在每个父div的中心.这是一个JSfiddle的问题:
我正在以父div为中心的图标(垂直和水平).我的页面上有很多不同大小的父div,所以我希望能够按比例将图标放在每个父div的中心.这是一个JSfiddle的问题:
HTML
<div class="img_container"> <i class="icon-play-circle"></i> </div> <br> <div class="img_container2"> <i class="icon-play-circle"></i> </div>
CSS
.img_container{ width:100px; height:100px; position:relative; background:red; } .img_container2{ width:100px; height:50px; position:relative; background:blue; } .icon-play-circle{ position:absolute; top:45%; left:45%; color: white; }
解决方法
由于它们已经是内嵌块子元素,因此您可以在父项上设置text-align:center,而无需设置宽度或边距:0px auto on the child.这意味着它将适用于具有不同宽度的动态生成的内容.
.img_container,.img_container2 { text-align: center; }
这将使孩子在两个div容器中居中.
更新:
对于垂直居中,您可以使用calc()函数,假设图标的高度已知.
.img_container > i,.img_container2 > i { position:relative; top: calc(50% - 10px); /* 50% - 3/4 of icon height */ }
jsFiddle demo – 它的作品.
为什么值得 – 也可以使用vertical-align:中间假设显示:table-cell设置在父项上.
原文地址:https://www.jb51.cc/html/231249.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。