css - 关于display:inline-block 元素，设置margin: 0 auto; 没有居中效果问题

问题描述

问 题

遇到一个inline-block元素，想让其居中显（span元素水平居中在div中）示，设置margin: 0 auto;也设置了宽度，但没有效果，如果把元素改为block，确可以居中显示，不知是什么原因？

html结构
<div class="closearea">
<span class="close">close</span>
</div>

css样式（scss语法）:
//关闭按钮

.closearea {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #e84f41;
  .close {
    font-size: 0px;
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid red;
    background-color: #1be8b2;
    margin: 0 auto;//display: inline-block;时不起作用，但是block时起作用 ???
  }
}

解决方案

inline-block是将元素转换为行内元素，所以你在设置margin: 0 auto 也是无用。
现在布局用的比较多的是flex，
推荐一篇文章：http://www.ruanyifeng.com/blo...

这篇关于css - 关于display:inline-block 元素，设置margin: 0 auto; 没有居中效果问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！