前端必知：15vertical-align使行元素在垂直方向的对齐

最新推荐文章于 2023-11-05 23:47:24 发布

小姚学前端

最新推荐文章于 2023-11-05 23:47:24 发布

阅读量173

点赞数 3

分类专栏： HTHL+CSS 文章标签：前端

本文链接：https://blog.csdn.net/qq_52799985/article/details/131816929

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

vertical-align

值：

top 顶部对齐

middle 中间对齐

baseline 基线对齐（以x的小写字母的底边线是基线）

bottom 底部对齐

vertical-align 只能使用在行元素或者内联元素（inline-block）

不能使用在块元素上

使用方式：

1.如果父元素的高度由其中一个子元素撑开，那么给其他元素设置

vertical-align：middle 就可以实现居中效果

2.如果父元素高度固定，不适用子元素撑开高度，则可以通过添加

一个自定义标签，该标签的高度为父元素的高度，然后设置

vertical-align: middle;和dispiay：inline-block 就可以

使父元素的内容居中

vertical-align 也可以解决img标签的缝隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>透明度</title>
    <style>
        *{
      margin: 0;
      padding: 0;
    } 
    .wp{
        width: 200px;
        height: 200px;
        background: #04be02;
        border: 1px #f00 solid;
        /* 设置透明 */
        opacity: 0.5;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: #F00;
        position: absolute;
        left: 300PX;
        top: 0;
    }
    .line,.line1 {
        border: 1px #f00 solid;
        width: 80%;
        margin: 20px auto;
    }
    .line1{
        height: 200px;
    }
    .line span{
        display: inline-block;
        border: 1px #f00 solid;
        /* 垂直居中 */
        vertical-align: middle;
        /* 底部对齐 */
        /* vertical-align: bottom; */

        /* vertical-align: baseline; */

        vertical-align: middle;
    }
    .fir{
        height: 100px;
        line-height: 100px;
    }
    .fr{
      height: 100px;
      line-height: 100px;
   }
   .line1 span{
       border: 1px #f00 solid;
       
   }
   .case{
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    width: 0;
   }
   .img-wp{
    width: 300px;
   
    border: 1px #f00 solid;

   }
   .img-wp img{
    width: 100%;
    height: 200px;
    vertical-align: middle;
   }
    </style>
   
</head>
<body>
    <!-- 
         transparent 透明色
         opacity: 设置元素的透明度，可以使整个元素透明，包含元素
         里面所有的内容。（ rgba只能设置背景颜色透明。）
         取值范围： 0-1 ， 0完全透明 1完全不透明


         行元素在垂直方向的对齐方式
         vertical-align 
                值：
                top 顶部对齐
                middle 中间对齐
                baseline  基线对齐  （以x的小写字母的底边线是基线）
                bottom 底部对齐
        vertical-align 只能使用在行元素或者内联元素（inline-block）
        不能使用在块元素上

        使用方式：
        1.如果父元素的高度由其中一个子元素撑开，那么给其他元素设置
        vertical-align：middle 就可以实现居中效果
        2.如果父元素高度固定，不适用子元素撑开高度，则可以通过 添加
        一个自定义标签，该标签的高度为父元素的高度，然后设置 
        vertical-align: middle;和dispiay：inline-block 就可以
        使父元素的内容居中

        vertical-align 也可以解决img标签的缝隙
     -->
    <div class="wp">
        独孤伽罗
        <div class="son"></div>
        
    </div>

    <div class="line">
            <div class="fir">杨坚</div>
            <span>杨广</span>
            <span>秦叔宝</span>
            <span>尉迟恭</span>
            <span>杨过</span>
        </div>

        <div class="line1">
            <span class="case"></span>
            <span >杨坚</span>
            <span>杨广</span>
            <span>秦叔宝</span>
            <span>尉迟恭</span>
            <span>杨过</span>
        </div>
        <div class="img-wp">
            <img src="../img/R-C (2).jpg" alt="">
        </div>
</body>
</html>

小姚学前端

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必知：15vertical-align使行元素在垂直方向的对齐

和dispiay：inline-block 就可以。vertical-align 只能使用在行元素或者内联元素（inline-block）vertical-align：middle 就可以实现居中效果。2.如果父元素高度固定，不适用子元素撑开高度，则可以通过添加。baseline 基线对齐（以x的小写字母的底边线是基线）1.如果父元素的高度由其中一个子元素撑开，那么给其他元素设置。vertical-align 也可以解决img标签的缝隙。一个自定义标签，该标签的高度为父元素的高度，然后设置。
复制链接

扫一扫