CSS基础知识（十三）：vertical-align

最新推荐文章于 2024-10-06 15:19:29 发布
最新推荐文章于 2024-10-06 15:19:29 发布
阅读量307 收藏
点赞数
分类专栏： CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44706267/article/details/121147571
版权

这里写自定义目录标题

一、vertical-align

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

vertical-align : baseline | top | middle | bottom

值描述
baseline默认，元素放在父元素的基线上
top把元素的顶端与行中最高元素的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶端与行中最低的元素的顶端对齐

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

学习资源：https://www.imooc.com/learn/542

橘子味的香蕉
关注
专栏目录
CSS属性vertical-align详解（CSS之五）
wenbintian的博客
08-23 2974
CSS属性vertical-align详解（CSS之五） 作用对象 vertical-align的意思是在垂直方向进行对齐。它主要对以下属性的元素有效 inline元素、inline-block元素和普通的文本。 行盒：line-box 定义： （盒的排布方式，不是行盒）在一个内联格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始。这些盒之间的水平margin，border和padding都有效。 （盒的对齐方式，不是行盒）盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文
CSS_黑马基础高级技巧
qq_42636335的博客
11-06 558
#CSS用户界面样式 界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 鼠标样式cursor 选择器{cursor: pointer;} 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 轮廓outline 是绘制于元素周围的一条线，位于边框边缘的外围（和边框不冲突），可起到突出元素的作用 选择器{online：none；}或者outline: 0; 一般情况下都是去掉的 防止拖拽文本域resize 实际开发中，我们文本域（text...
CSS-vertical-align
堇年
09-02 742
vertical-alignvertical-align vertical-align 设置元素的垂直对齐方式 注意 : text-align是设置给需要对齐元素的父元素 vertical-align是设置给需要对齐的那个元素本身 vertical-align只对行内元素有效 img { /*默认情况下图片和一行文字的基线对齐 基线就是一行文字中最短那个文字的底部*/ /* 基线 *...
深入理解 vertical-align
最新发布
weixin_50681225的博客
10-06 1065
的规则： 将该盒子的基线与父盒子的基线对齐。我们将文字换成一行，来更清晰的观察行盒，由于添加了一个方块，行盒被撑大了。，图片顶部会与行盒顶部对齐，也就是与文字的 top 对齐，视觉上文字上移。在图片周围没有文字的情况下，行内元素会预留一部分空间来与文字的基线对齐。对于每一行来说，其实有一个隐形的盒子包裹住每行的内容，这个盒子叫行盒（图片，文字与行内块元素的基线对齐，行内块最高，盒子被行内块元素撑开。的底部，三者的基线对齐，行内块元素视觉上向上移动，盒子被撑大。了解了基线，我们来看看为什么会出现不同的结果。
css属性之vertical-align
qq_34082921的博客
10-24 772
【代码】css属性之vertical-align。
css 【详解】—— 图片底部留有间隙（含解决方案）
朝阳39的博客
03-25 1084
现象描述 任意一个块级元素，里面若有图片，则块级元素高度基本上都要比图片的高度高。 .box { 　 width: 280px; 　 outline: 1px solid #aaa; 　 text-align: center; } .box > img { 　 height: 96px; } <div class="box"> 　 <img src="1.jpg"> </div> 原因解析 当前line-height计算值是20px，而font.
Css基础——vertical-align属性
迪幻的博客
03-11 4849
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。行内块元素适用vertical-align属性，图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直 居中对齐了。
css基础--vertical-align
chujinmaolu的博客
06-22 2541
1、vertical-align属性值分为以下4类： 线类，如baseline（默认值）、top、middle、bottom； 文本类，如text-top、text-bottom； 上标下标类，如sub、super； 数值百分比类，如20px、2em、20%等。 数值百分比类根据计算值的不同，相对于基线往上或往下偏移，到底是往上还是往下取决于vertical- align的计算值是正值还是负值，如果是负值，往下偏移，如果是正值，往上偏移。 vertical-align的默认值是baseline，即基线对齐，
css基础知识 -- 选择器
qq_52993453的博客
11-18 1499
1.css选择器： 用于“查找”（或选取）要设置样式的 HTML 元素；选择器种类分为5类 简单选择器（根据名称、id、类来选取元素） 组合器选择器（根据它们之间的特定关系来选取元素） 伪类选择器（根据特定状态选取元素） 伪元素选择器（选取元素的一部分并设置其样式） 属性选择器（根据属性或属性值来选取元素） 1.1简单选择器 1.1.1元素选择器：根据元素名称来选择 HTML 元素 p { text-align: center; color: green; } 1.1.2..
css基础---vertical-align三
chujinmaolu的博客
06-25 497
1、vertical-align文本类属性值 vertical-align:text-top：盒子的顶部和父级内容区域的顶部对齐。 vertical-align:text-bottom：盒子的底部和父级内容区域的底部对齐。
css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
09-27
在这个文本中，我们首先要了解的知识点是关于Webkit浏览器引擎的一个非标准CSS属性：-webkit-line-clamp。这个属性的用途在于限制一个块级元素内的文本显示行数，超出部分则通过省略号隐藏，从而达到所谓的“文本...
htmlCss----Day2(vertical-align)
weixin_45170547的博客
11-04 345
vertical-align - 指定行内元素（inline）或表格单元格（table-cell）元素的 - 行内元素的值 相对父元素的值 这些值使元素相对其父元素垂直对齐： baseline /* 使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如<textarea> ，这意味着这些元素使用此值的表现因浏览器而异。 */ sub /* 使元素的基线...
CSS:vertical-align的用法
tiandaochouqin_1的博客
03-06 400
1.此垂直居中不影响块级元素以及块级元素的内容，只影响行内元素和行内块元素。 2.常用于控制（行内块元素）图片、表单和文字的对齐。在行内块元素上加vertical-align。 3.图片（行内块元素）和文字（行内）的对齐方式默认为基线对齐（baseline）。 4. top（顶线） middle（中线） baseline（基线） bottom（底线） 行内块元素有：表单...
CSS中vertical-align属性
weixin_42839354的博客
01-03 323
参考：https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&amp;utm_medium=referral” vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。默认值...
css笔记 vertical-align详解
热门推荐
JiuMeilove的博客
10-10 4万+
vertical-align 我们来讨论一下CSS的属性vertical-align。它一般的用途，其实就是用来排列彼此相邻的文本和元素的。 但是有时候，他在工作的时候，也会有一些诡异的表现，让我们无所适从。比如说你可能碰见过这样的情况，当你改变了一个元素的vertical-align属性的值以后，这个元素的排列方式并没有发生变化，但是呢，紧挨着它的元素却变了。 因此，为了减少未来因此而造成的痛苦，我仔细研究了W3C的CSS规范，并且一次性的澄清了vertical-align的所有表现。 现在就让我们揭开它
简要分析CSS中的vertical-align
lihouyi02的博客
05-02 1090
学习过程中对于vertical-align的一些思考与整理，仅供参考与交流。
css学习笔记之vertical-align
蔻蔻
07-20 286
/* 只是记录下前端学习过程中的笔记 有错误 麻烦各位大佬一定指正啊 别让我这个渣渣 保留错误的想法 跪谢了 ：）  先说好喔  新手看我的笔记大概会被我搞晕 我是按自己思路写的 网上有很多大佬好的总结 最好别太记忆我写的恶心巴拉的笔记   祝好运哦  学习来源： http://blog.csdn.NET/q121516340/article/details/5148343
CSS基础知识------CSS美化网页
weixin_44821216的博客
06-18 602
为什么使用css美化网页 1.可以有效地传递页面信息 2.使用css美化过的页面文本漂亮、美观、可以吸引用户 3.可以很好的突出页面的主题内容，使用户第一眼可以看到页面的主要内容 4.具有良好的用户体验 css字体 css字体属性定义文本的字体系列、大小、加粗、风格（如斜体等）和变形（如小型大写字母）。 设置字体类型 font-family用来设置字体类型。例如 font-family:"隶书";...
CSS属性vertical-align
Ellasun_web的博客
04-27 306
用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、行内块元素和表格单元格元素生效。
CSS属性：vertical-align详解
沉梦昂志
06-22 1007
文章推荐 link1 link2 link3 Vertical-align属性 Vertical-align被用于垂直对齐inline元素，inline-block元素，以及inline-table的元素 inline元素基本上指的就是文本，inline-block元素基本上指图片，inline-table基本上指的表格 对齐inline元素 基本介绍 baseline：将元素x的基线与其父元素x的基线对齐 middle：将元素行高的中间与父对象x的基线对齐，再加上父对象的x高度的一半 top：将元素
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值