Question

我需要在我的div中居中图像，但是当我使用一些代码时，它会改变我的其他代码，就像魔术圈一样。

我的HTML http://textuploader.com/d40ta 我的CSS http://textuploader.com/d40t5

Answer 1

默认情况下，图像是内联块。这意味着您可以使用text-align: center将它们置于块级父级中。默认情况下，<div>或<p>元素是块级别，但您可以通过将display: block应用于该元素来制作几乎任何元素块级别。

如果图片已经是display: block，您可以通过应用margin: 0 auto来居中，其中auto是功能值（第一个值可以是任何单位，向顶部添加边距）和图像的底部）。

Answer 2

CSS3解决方案：

只需修改下面的CSS类。

.iui {
    border: 2px solid black;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    top: 20px;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: red;
    margin-left: auto;
    margin-right:auto;
}

JSFiddle Demo

CSS解决方案：

在下面的解决方案中，我们需要将CSS属性line-height设置为与类iui的元素高度相同。然后我们需要使用CSS属性display:inline-block;vertical-align:middle在div中设置图像，这将使图像居中。

.iui {
    border: 2px solid black;
    width: 200px;
    height: 200px;
    line-height: 200px;
    border-radius: 100px;
    text-align: center;
    background-color: red;
    margin-left: auto;
    margin-right:auto;
}

.iui img{
  vertical-align:middle;
  display:inline-block;
}

JSFiddle Demo

我需要用css将图像居中到div

2 个答案: