html⼀张图⽚⽔平居中,css如何让图⽚⽔平居中？
css如何让图⽚⽔平居中？下⾯本篇⽂章就来给⼤家介绍⼀下使⽤CSS让图⽚⽔平居中的⽅法。有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对⼤家有所帮助。
在CSS中，img图⽚是内联元素，所以margin属性对其⽆效。但可以先使⽤display属性将其转换为块状元素，然后使⽤margin: auto；让图⽚居中。
⽰例：
div{
border:1px solid red ;
}
img{
margin: auto;
display: block;
}
效果图：
css设置文字垂直居中display属性
display 属性规定元素应该⽣成的框的类型。
常⽤属性值：none 此元素不会被显⽰。
block 此元素将显⽰为块级元素，此元素前后会带有换⾏符。
inline 默认。此元素会被显⽰为内联元素，元素前后没有换⾏符。
inline-block ⾏内块元素。(CSS2.1 新增的值)
给img元素设置display: block；样式可将其转换为块状元素。
margin属性
使⽤margin:0 auto可以让块状元素⽔平居中。其中，auto就是左右⾃适应两边距离⼀样。
margin属性⽤于设置⼀个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，⽽⾏内元素实际上不占上下外边距。⾏内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使⽤时要⼩⼼。
属性值：auto：浏览器计算外边距。
length：规定以具体单位计的外边距值，⽐如像素、厘⽶等。默认值是 0px。
%：规定基于⽗元素的宽度的百分⽐的外边距。
更多前端开发知识，请查阅 HTML中⽂⽹ ！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。