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中文网 !!