在一个div中居中显示图标 - 水平和垂直居中

13 浏览
0 Comments

在一个div中居中显示图标 - 水平和垂直居中

我在父级div中居中图标（垂直和水平方向）遇到了问题。在我的页面上，我有许多不同尺寸的父级div，所以我希望能够按比例将图标放置在每个父级div的中心位置。这是一个关于这个问题的JSFiddle链接：

JsFiddle

HTML

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

0

3 答案

0 Comments

问题原因：在一个div中居中显示一个图标。

解决方法：

1. 水平居中对齐：使用CSS属性text-align: center可以实现水平居中对齐。

2. 已知容器高度的垂直居中对齐：使用CSS属性height: 100px;和line-height: 100px;可以实现已知容器高度的垂直居中对齐。同时，使用vertical-align: middle属性可以使元素在垂直方向上居中对齐。

3. 未知容器高度且可以在背景中设置图像的垂直居中对齐：使用CSS属性background: url(someimage) no-repeat center center;可以实现未知容器高度且可以在背景中设置图像的垂直居中对齐。通过设置背景图像在水平和垂直方向上居中对齐来实现目标。

通过上述方法，可以解决在一个div中居中显示一个图标的问题。

0
0 Comments

问题：如何在一个div中垂直和水平居中一个图标？

原因：由于图标是内联块元素，所以可以在父元素上设置text-align:center来实现水平居中，而无需在子元素上设置宽度或margin:0px auto。对于宽度不同的动态生成内容也适用。

解决方法：可以使用calc()函数来实现垂直居中，假设已知图标的高度。另外，可以在父元素上设置display:table-cell和vertical-align:middle来实现垂直居中。以下是具体的代码：

.img_container, .img_container2 {
    text-align: center;
}
.img_container > i, .img_container2 > i {
    position:relative;
    top: calc(50% - 10px); /* 50% - 3/4 of icon height */
}

另外，还可以将图标设置为背景图片，并使用background-repeat: no-repeat和background-position: center center来实现垂直居中。

以上就是关于在一个div中垂直和水平居中图标的问题的原因和解决方法。

0
0 Comments

在某些情况下，我们需要将内容在一个div中垂直和水平居中，尤其是当我们不知道div的宽度或高度时。以下是一种实现这种效果的方法：

首先，在CSS中设置一个id为"container"的div，将其display属性设置为table，以及设置一个宽度和高度（这里只是为了举例方便，实际使用时可以根据需要设置或删除）。

然后，在这个div中再添加一个id为"update"的a标签，将其display属性设置为table-cell，同时设置垂直居中和水平居中的样式。

最后，在这个a标签中添加内容，比如一个图标，这里使用了一个class为"icon-refresh"的i标签。

需要注意的是，宽度和高度的值在这里只是为了演示，你可以根据自己的需求更改它们（或者完全删除），因为这里的垂直居中是由table-cell的display属性实现的。

以上就是实现在一个div中垂直和水平居中的方法。通过设置div的display属性为table，再在内部元素中设置display属性为table-cell，并设置垂直和水平居中的样式，我们可以轻松地实现这个效果。你可以点击上方的链接查看这个方法的实际效果。

0