display:inline-block和元素水平居中的关系

一般情况下, 如果我们要使一个div在父元素中水平居中显示, 我们会给它设置一个宽度, 然后设置margin: 0 auto; 但这个属性只有在div的display为block或者默认情况下才会有效果. 但是在某些必需的情况下, 我们给div设置了display为inline-block的情况下, 发现使用margin来让其居中这个方法行不通. 那么此时解决的方法就是: 给该元素的父元素添加样式  text-align: center, 这样的话该元素就可以实现水平居中了.

目前我所接触的比较常见的例子就是表格当中有a标签, 因为a标签是内联元素, 为了给它添加样式, 我们常常设置display: inline-block使其具有width, height, padding等属性, 那么此时如果要在表格中居中显示, margin就不起作用了, 那么此时就可以给特定的td或者tr设置text-align:center就可以使其居中, 然后如果你的表格文本内容需要居左或居右对齐等, 给table设置text-align就可以了.