html – div中的中心图标 – 水平和垂直

概述参见英文答案 > How to center an element horizontally and vertically?                                    10个 我正在以父div为中心的图标(垂直和水平).我的页面上有很多不同大小的父div,所以我希望能够按比例将图标放在每个父div的中心.这是一个JSFiddle的问题： http://jsfiddle. 参见英文答案 > How to center an element horizontally and vertically?10个
我正在以父div为中心的图标(垂直和水平).我的页面上有很多不同大小的父div,所以我希望能够按比例将图标放在每个父div的中心.这是一个Jsfiddle的问题：

http://jsfiddle.net/kVHbV/

HTML

<div >  <i ></i></div><br><div >  <i ></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设置在父项上.

总结

以上是内存溢出为你收集整理的html – div中的中心图标 – 水平和垂直全部内容，希望文章能够帮你解决html – div中的中心图标 – 水平和垂直所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。