参见英文答案 >
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设置在父项上.