利用vertical-align:middle垂直居中及其它用法_vertical-align: middle;用法-优快云博客

本文链接：https://blog.youkuaiyun.com/huawuque004/article/details/89206138

本文详细解析了一个收银台UI的设计案例，包括如何利用不同的CSS属性实现元素的精确对齐，如vertical-align、text-align等，适用于前端开发人员学习和参考。

<div class="wrapper">
   <div class="head">
      <span class="title">收银台</span>
      <div class="help"></div>
   </div>
</div>

.wrapper{
    max-width: 750px;
    height: 920px;
    margin: 0 auto;
}
.head{
    width: 100%;
    height: 90px;
    font-size: 20px;
    color: white;
    background-color:pink;
    text-align: center;
}
.head .title{
    width: 100px;
    background-color: deepskyblue;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}
.head .help{
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background-color: blue;
}

.head .title{
    width: 100px;
    background-color: deepskyblue;
    display: inline-block;
    vertical-align: top;
    margin: 0 auto;
}
.head .help{
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background-color: blue;
}

.head .title{
    width: 100px;
    background-color: deepskyblue;
    display: inline-block;
    vertical-align: bottom;
    margin: 0 auto;
}
.head .help{
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background-color: blue;
}

.head .title{
    width: 100px;
    background-color: deepskyblue;
    display: inline-block;
    vertical-align: text-top;
    margin: 0 auto;
}
.head .help{
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background-color: blue;
}

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	 
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。