div中的中心图标 - 水平和垂直

Question

我有问题在父div中居中图标(垂直和水平).我的divs页面上有很多不同大小的父级,所以我希望能够按比例将图标放在每个父级div的中心.这是问题的JSFiddle:

http://jsfiddle.net/kVHbV/

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;
}

Answer 1

由于它们已经是inline-block子元素,因此您可以text-align:center在父元素上设置,而无需在子元素上设置width或margin:0px auto.这意味着它将适用于动态生成的内容widths.

.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演示 - 它的工作原理.

对于它的价值 - 你也可以使用vertical-align:middle假设display:table-cell在父级上设置.

Answer 2

这是一种在任何情况下垂直和水平居中内容的方法,这在您不知道宽度或高度或两者时都很有用:

CSS

#container {
    display: table;
    width: 300px; /* not required, just for example */
    height: 400px; /* not required, just for example */
}

#update {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

HTML

<div id="container">
    <a id="update" href="#">
        <i class="icon-refresh"></i>
    </a>
</div>

的jsfiddle

请注意,宽度和高度值仅用于演示,您可以将它们更改为您想要的任何内容(或完全删除它们),它仍然可以工作,因为此处的垂直居中是table-cell显示属性工作方式的乘积.

编辑:链接到错误的JSFiddle!

Answer 3

水平居中非常简单：

text-align: center

当容器为已知高度时垂直居中：

height: 100px;
line-height: 100px;
vertical-align: middle

当容器不是已知高度时垂直居中，您可以在背景中设置图像：

background: url(someimage) no-repeat center center;