img { display: inline-block; vertical-align: middle; }以上代码定义了img标签的默认样式,并将其呈现为水平的行内块元素。同时,我们也可以看到,其采用了垂直居中的方式。 但是,实际上,当我们为img元素设置宽度时,他的定位方式就不是水平居中了。比如下面的例子:
p { text-align:center; } img { width: 50%; display:block; margin:auto; }以上代码将img元素的显示方式设置为块元素,同时设置margin值为auto,这样就能够实现图片水平居中了。 总结来说,实现img标签居中,我们要考虑其父级元素的样式,调整img标签的显示方式和margin值,这样就能够轻松实现图片的居中对齐。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。