html一张图片水平居中,css如何让图片水平居中？

css如何让图片水平居中？下面本篇文章就来给大家介绍一下使用CSS让图片水平居中的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

在CSS中，img图片是内联元素，所以margin属性对其无效。但可以先使用display属性将其转换为块状元素，然后使用margin: auto;让图片居中。

示例：

div{

border:1px solid red ;

}

img{

margin: auto;

display: block;

}

效果图：

display属性

display 属性规定元素应该生成的框的类型。

常用属性值：none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。(CSS2.1 新增的值)

给img元素设置display: block;样式可将其转换为块状元素。

margin属性

使用margin:0 auto可以让块状元素水平居中。其中，auto就是左右自适应两边距离一样。

margin属性用于设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

属性值：auto：浏览器计算外边距。

length：规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。

%：规定基于父元素的宽度的百分比的外边距。

更多前端开发知识，请查阅 HTML中文网 ！！