526互联

css vertical-align \ text-align 居中

发布时间 2023-12-09 10:56:06作者: laremehpe

vertical-align ：

1、只能作用在子元素 display 值为 inline，inline-block，inline-table，table-cell 的元素上，

2、子元素 设置vertical-align

3、父元素高度是由line-height决定（不要乱给父元素添加height）

<div class="father">
      <span class="son">a</span>
</div>

 <style>
      .father {
        width: 200px;
        line-height: 200px;
      }
      .son {
        // display: inline-block; // span元素默认inline，p元素默认 block（即p标签需要设置display，span不用设置）
        vertical-align: middle;
      }
</style>

text-align:

1、父元素设置text-align:center

<div class="father">
      <span class="son">a</span>
</div>

 <style>
      .father {
        width: 200px;
        height: 200px;
        text-align: middle;
      }
</style>

 

margin: 0 auto:

1、子元素display 为 block、inline

注意：子元素不可以是inline-block