CSS中使用inline-block来进行居中的示例

2020-05-07 06:36:09易采站长站整理

  vertical-align: middle;   
}   
    
.Center-Container.is-Inline:after {   
  content: ”;   
  height: 100%;   
  margin-left: -0.25em; /* To offset spacing. May vary by font */  
}   
    
.is-Inline .Center-Block {   
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
  /* max-width: calc(100% – 0.25em) /* Only for IE9+ */  
}  

  好处:

    内容高度可变
    内容溢出则能自动撑开父元素高度
    浏览器兼容性好,甚至可以调整支持IE7

  同时注意:

    需要额外容器
    依赖于margin-left: -0.25em的样式,做到水平居中,需要为不同的字体大小作调整
    内容区声明的宽度不能大于容器的100% 减去0.25em的宽度