013Vertical-align

最新推荐文章于 2023-02-10 18:52:59 发布

Manta__

最新推荐文章于 2023-02-10 18:52:59 发布

阅读量94

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Manta__/article/details/104870863

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

Vertical-align
　　　-用来指定imline-block的垂直对齐方式
　　　ps:我们经常会在img (管换元素)上使用vertical- align属性
　　　默认值: baseline |不可继承
值：大部值是相对于父元素来说的:
baseline
　　　-元素基线与父元素的基线对齐
对于一些可替换元素，比如<textarea> ，HTML标准没有说明它的基统，这意味着对其使用这个关键字，备测览器表现可能不一样。一般情况下如果元素没有基线baseline,则以它的外边距的下边怪为基统。

text- top
　　　-元素项端与父元素字体的项端对齐。
text- bottom
　　　-元素底端与父元素字体的底端对齐。
middle
　　　-元素中线与父元素的小写x中线对齐。
sub
　　　-元素基线与父元素的下标基线对齐。( 使元素的基线相对于基准基线下降，下降的幅度有浏览器厂商决定)
super
　　　-元素基线与父元素的上标基线对齐。( 使元素的基线相对于基准基线升高，升高的幅度有浏览器厂商决定)
<length>
　　　-元素基线超过父元素的基线指定高度。可以取负值。
<percentage>
　　　-同length，相对于的line-hight

图片垂直水平居中
<style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   #wrap{
    height: 400px;
    width: 400px;
    border: 1px solid ;
    margin: 0 auto;
    text-align: center;//text-align只管内联元素和行内元素
   }
   #wrap:after{
    content: "";
    display: inline-block;
    height: 100%;
    width: 1px;//正常设为0隐藏
    background: pink;
    vertical-align: middle;
   }
   #wrap img{
    vertical-align: middle;
   }
  </style>
  <body>
  <div id="wrap">
   <img src="../img/person1.png" width="150"/>
  </div>
 </body>