47

我在父 div 中将图标（垂直和水平）居中时遇到问题。我的页面上有许多大小不同的父divs级，因此我希望能够按比例将图标放置在每个父级 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;
}
4

3 回答 3

49

由于它们已经是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

于 2013-10-01T19:27:52.960 回答
19

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

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-celldisplay 属性工作方式的产物。

于 2013-10-01T20:11:40.823 回答
6

水平居中很简单：

text-align: center

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

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

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

background: url(someimage) no-repeat center center;
于 2013-10-01T20:02:38.467 回答