css样式设置元素无法居中







热门景点




export default { name: 'HomeIcons' } @import '~styles/varibles.styl'; .icons height :0 padding-bottom :50% overflow : hidden background :gray .icon position: relative float: left width : 25% padding-bottom :25% overflow: hidden height :0 .icon-img position :absolute top: 0 left: 0 right: 0 bottom : .44rem box-sizing :border-box padding : .1rem .icon-img-content display :block height : 100% margin : 0 auto /*margin:5px 15px */ .icon-desc position : absolute left:0 right :0 bottom:0 height :.44rem line-height : .44rem color : $darkTextColor; text-align :center

图片说明

图片说明

给大盒子一个center不行吗,不行你试试将外边距设置为auto。

用一个大的div包起来 其他使用标签

可以使用margin-left

把.icon中float去掉 增加margin:0 auto;

给你参考代码,直接复制这段代码看看能不能居中,如果能,你就将你的P换成div

<div style="background-color:#ccc;width:50px;margin:0 auto;">dfdfd</div>

居中有两种方式一种块元素居中 用margin:0 auto; 一种行内元素居中text-align: center; 如果还没有居中就是浮动问题 希望对你有帮助

把外圈的div 设成宽度度 100%

你的代码:
``` .icon-img position :absolute top: 0 left: 0 right: 0 bottom : .44rem box-sizing :border-box padding : .1rem

加上"width:??px; margin:0  auto;"其中??是你自己规定的div的大小。



图片说明