css text居中显示图片

CSS的文本居中功能可以用来对图片进行居中显示。使用text-align:center属性可以对图片进行水平居中，而使用line-height和height属性可以对图片进行垂直居中。

img {
    display: block;
    margin: 0 auto;
    text-align: center;
    line-height: 容器高度;
    height: 图片高度;
}
    

其中，display:block可以使图片以块级元素显示，方便使用margin属性进行水平居中；text-align:center可以实现水平居中；line-height和height属性可以实现垂直居中。具体容器高度和图片高度要根据实际情况进行设定。

下面是一个例子：

div class="container">
    img src="example.jpg" alt="example">
    /div>
.container {
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
}
.container img {
    display: block;
    margin: 0 auto;
    text-align: center;
    line-height: 300px;
    height: 200px;
}
    

以上代码会生成一个宽为500px，高为300px的容器，图片宽为自适应，高为200px，位于容器的中央。

文本居中还有其他方法，例如使用flex布局或者position属性进行实现。根据实际情况选择最合适的方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！