首页 > 其他分享 >Css基础——vertical-align属性

Css基础——vertical-align属性

时间:2024-03-13 19:59:31浏览次数:35  
标签:行内 vertical align 对齐 200px Css 图片

1、vertical-align的定义

CSS 的 vertical-align 属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐。 官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。

2、vertical-align的语法

vertical-align : baseline | top | middle | bottom

3、效果图&代码

1、默认的情况(默认情况为vertical-align:baseline)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <img src="./images/迪幻.jpg" alt="">dihuan-g
</body>

</html>

2、图片的底线和文字的底线对齐 vertical-align: bottom

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <img src="./images/迪幻.jpg" alt="">dihuan-g
</body>

</html>

2、图片的底线与文字的基线对齐 vertical-align:baseline

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            vertical-align: baseline;
        }
    </style>
</head>

<body>
    <img src="./images/迪幻.jpg" alt="">dihuan-g
</body>

</html>

3、图片的中线与文字的中线垂直居中对齐vertical-align:middle

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <img src="./images/迪幻.jpg" alt="">dihuan-g
</body>

</html>

4、图片的上端与文字的顶线对齐vertical-align:top

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <img src="./images/迪幻.jpg" alt="">dihuan-g
</body>

</html>

4、解决图片底部空隙问题

bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。 主要解决方法有两种:

1. 给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)

2. 把图片转换为块级元素 display: block;

5、总结:

行内块元素适用vertical-align属性,图片、表单都属于行内块元素,默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直 居中对齐了。

标签:行内,vertical,align,对齐,200px,Css,图片
From: https://blog.csdn.net/qq_38965505/article/details/136591815

相关文章

  • CSS 学习第一天
    #层叠样式表样式:文字大小、背景颜色、元素宽高等等层叠:类似于化妆、一层一层的进行修饰表:列表#行内样式写在标签的style属性中(又称:内联样式)style 样式要符合CSS规范(名:值;)的形式,最好放在<head>标签中!!多个html无法重复使用设置的CSS样式#外部样式写在单独的.css文......
  • CSS学习第三期(新手勿喷)
    今天是我第三天学习CSS,今天在昨日的基础之上,学习了关于盒子的CSS属性,以及背景的属性,还有选择器和透明度,浮动,话不多说开始今天的分享。一。盒子的属性盒子的属性中有宽,高,背景颜色,文字颜色,文字的粗细,文字的大小,文字的水平对齐,上下和居中,边框的颜色,边框的宽度,还有变宽的线条;1.1......
  • 震惊!css居然可以这么用!
       如果说html是盖房子,那么css就是装修房子,它可以决定外观、样式、和位置等网页元素。一、css的几种使用方式    1、行内样式    所有标签都自带有style属性,因此给标签加一个style=“样式1:样式1的值;样式2:样式2的值”,如果有多个样式,样式和样式之间......
  • CSS下划线动画
    <template><divclass="home"><h2class="title"><span>FromthemomentIsawyou,myheartbegantobeatinadifferentrhythm.Yoursmileislikearayofsunshinethatwarmsmywor......
  • css 闪烁 左右摆动效果
    代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style></style></head><body><divstyle="display:......
  • 02-CSS
    CascadingStyleSheet层叠样式表CSS是一种描述HTML文档样式的语言CSS描述应该如何显示HTML元素CSS的基本原则是内容与样式相分离CSSSelector标签选择器TagSelector作用于所有标签<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>CSS基础:刘......
  • Tailwind CSS Grid
    今天碰到一个问题,就是工作台,要根据权限来自动显示有权限的模块。一开始是纵向的,导致一些问题,也就是说01,05,09显示一列,02,06显示一列。如果02,06有权限的话,显示的是左边空的,右边显示出来,怪怪的。 现在要让模块02,06,比如还多一个05,模块显示,那么就是02,06,05,按顺序,显示出来,那就是02,06......
  • 学习CSS
                                          基础认知CSS的介绍CSS:全称:CascadingStyleSheets,中文译为:层叠样式表CSS的作用:给页面的HTML标签设置样式                                    基......
  • 最常用的CSS
    补充:书写规范:选择器后面要有空格其他直接看:CSS按钮|菜鸟教程(it028.com)www.it028.com/index.htm CSS使用方式:三种1內部式 2行内式:直接在标签中的style属性中写 3外部样式表:通过link标签引入权重大小很明显,越近权重越大:行内>内部>外部引入 CSS三大特性:层叠......
  • CSS鼠标样式(cursor)
    一、CSScursor基本语法cursor属性是什么:指鼠标指针放在一个元素边界范围内时所呈现的光标形状,它包括问号,小手等形状。使用时可以在任何你想要添加的标签里,插入style="cursor:某属性值",也可以在CSS样式中添加。比如:pointer,小手形状help,帮助形状。cursor的属性值有十几种可选......