CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例 

vertical-align
属性值 效果
baseline 基线对齐
top 顶部对齐
middle 中心对齐
bottom 底部对齐 
使用案例1：百度搜索框左边和右边底部没有对齐

使用vertical-align：top;/vertical-align:bottom; 之后效果

 案例,html结构代码：     

<body>
    <input type="text" ><input type="button" value="百度">
</body>

CSS 结构代码

    <style>
       input{
           height: 50px;
           box-sizing: border-box;
           vertical-align: bottom; /*或者使用float：left*/
       }
    </style>
案例2：图片和文本框默认没有对齐

 解决之后：

html 结构代码：
        <body>
             <img src="./images/" alt=""><input type="button" value="百度">
       </body>
CSS结构代码：
   <style>
       img{
           vertical-align: bottom;
       }
    </style>
案例3：div中的文本框是无法贴顶部的

 使用之后效果

html结构代码：
     <div class="father">
       <div class="son"></div>
    </div>
CSS结构代码：
  <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        input {
            vertical-align: top;
        }
    </style>
案例4： div 不设置高，有内容撑开；此时img标签下面有缝隙存在；浏览器默认图片和文字基线对齐方式，所以理由空间

使用vertical-align之后

html 结构代码：
    <div class="father">
       <img src="./images/code.jpg" alt="">
   </div>
CSS结构代码：
  <style>
        .father{
            width: 400px;
            background-color: pink;
        }
        img {
            vertical-align: top;/*或者转换为块元素来消除行内元素和行内块元素所带来的影响：display:block*/ 
        }
    </style>
案例5：利用line-height将div内的img垂直居中对齐（只对行内元素和行内块元素生效）

 

html 结构代码
   <div class="father">
       <img src="./images/code.jpg" alt="">
   </div>
CSS结构代码
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: pink;
            line-height: 600px ;
        }
        img {
            vertical-align: middle;
        }
    </style>

 

 

posted @ 2021-12-30 15:31  嘉琦  阅读(873)  评论(0)    收藏  举报