10.对齐方式

对齐方式

• 文字水平对齐 设置高度和行高一样即可

.root {
  height: 50px;
  line-height: 50px;
}

• 让盒子和文字基于中线对齐 vertical-align: middle;

//html
  <div class="root">
      <a href></a>//盒子
      <span>文字</span>
      <a href></a>//盒子
    </div>
//css
<style>
.root a {
//让盒子和文字基于中线对齐
  vertical-align: middle;
}
.root span {
//让盒子和文字基于中线对齐
  vertical-align: middle;
}
</style>

• div元素水平居中
  如果是inline-block元素需要加上display: block;

div {
    /* 写法1 */
    margin: auto;
    /* 写法2 */
    margin-right: auto;
    margin-left: auto;
}