javascript - 父div宽度100%，图片怎么居中?-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 父div宽度100%，图片怎么居中?

PHP中文网 2017-04-10 15:23:03

[JavaScript讨论组]

1737

现在宽屏设计常见，为了适应不同的显示器，往往给p一个100%的宽度，下面再写，那么问题来了，这样的图片怎样做到在任何窗口宽度时自动居中显示?

3Q!

PHP中文网

认证0级讲师

全部回复(14)

大家讲道理2017-04-10 15:25:03 14楼

方法1， img中设置样式 <img src="xxx" style="display: block; margin: 0px auto; vertical-align: middle;">
方法2， p中设置样式 <p style="text-align:center;">
... 其实有很多种方法

赞 +0

添加回复

PHPz2017-04-10 15:25:03 13楼

补充一点不需要给元素设置宽度100% 默认块级元素就是100%的

赞 +0

添加回复

ringa_lee2017-04-10 15:25:03 12楼

去看看张鑫旭大神博客，有各种居中。w3cplus上也有各种居中文章。

赞 +0

添加回复

大家讲道理2017-04-10 15:25:03 11楼

p 用 text-align:center;
然后img用 margin:0 auto;注意的是后面那个auto，前面那个0自定义

赞 +0

添加回复

阿神2017-04-10 15:25:03 10楼

绝对定位left:50%
然后再用margin-left图片宽度的一半

赞 +0

添加回复

伊谢尔伦2017-04-10 15:25:03 9楼

为什么一定是图片，而不是作为背景图片呢，作为背景图片的话，background-position:center;就解决了啊……

如果你是要做很多动画效果的话，那就再议了，或许也可以用背景图片的方式，就是看其他动画的元素怎么去定义位置了。

赞 +0

添加回复

巴扎黑2017-04-10 15:25:03 8楼

<p>
    <img src="" />
</p>

CSS

p{
    position:relative;
    width:100%;
}
p img{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    max-width:100%;
}

或许你可以试试这样子写

赞 +0

添加回复