08.css入门笔记-vertical-align

最新推荐文章于 2024-05-23 22:59:55 发布
最新推荐文章于 2024-05-23 22:59:55 发布
阅读量190 收藏
点赞数 1
分类专栏： css基础 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_LiuP/article/details/122942949
版权

文章目录

前言

一、vertical-align定义

二、vertical-align使用场景

三、语法

四、图片底部默认有空白缝隙问题

总结

前言

在页面布局的时候，我们经常会见到文字和图片是左右对齐或者文字环绕图片的这种形式。那边怎么样才能让文字和图片对齐呢？这个时候我们就需要用到vertical-align 属性了

一、vertical-align定义

用于设置一个元素的垂直对齐方式，但只针对行内元素或行内块元素

二、vertical-align使用场景

经常用于设置图片或表单和文字的垂直对齐方式

三、语法

vertical-align : baseline  / top/  middle  /bottom

baseline ：默认是和基线对齐

top: 顶部对齐

middle: 居中对齐

bottom: 底部对齐

四、图片底部默认有空白缝隙问题

bug：原因是行内块元素会和文字的基线对齐

解决办法两种：

  1. 给图片添加vertical-align: top | middle | bottom 任意都可（提倡使用）
  2. 给图片设置成块级元素，display:block;

总结

以上是今天分享的关于vertical-align相关的内容啦，祝大家元宵节快乐！

Mr_LiuP
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery-ui.css、jquery-ui.js下载
11-05
jquery-ui.css、jquery-ui.js
【CSS】水平居中、垂直居中、水平垂直居中
Dora_5537的博客
05-09 202
总结 1. 水平居中 （1）使用 text-align：把父元素设置为：text-align: center 该方法均适用于行内元素、行内块元素、块级元素。 注意：如果块级元素设置了宽度，则需要把块级元素设置为行内元素或行内块元素：display: inline 或 display: inline-block； （2）使用 margin：把元素设置为：...
纵向对齐 html,CSS 布局 – 水平 & 垂直对齐 | 菜鸟教程
weixin_39612057的博客
05-30 290
CSS 布局 - 水平 & 垂直对齐水平 & 垂直居中对齐元素居中对齐要水平居中对齐一个元素(如 ), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配：div 元素是居中的实例.center{margin:auto;width:50%;border:3pxsolidgreen;padding:10px;}...
CSS line-height和vertical-align详解
qq_40891322的博客
10-13 553
一.line-height 首先看一张图： 从上到下分别是top(顶线),middle(中线),baseline(基线),bottom(底线) 1.line_height:行高，等于内容区域高度+行间距，在图中就是上一行文字底线到下一行文字底线之间的距离。 2.font-size：font-size为字体的高度，图中就是一行文字顶线到底线之间的区域的高度，也就是内容区域高度，即为图中深灰色部分。 3.行间距：两行文字之间的距离，图中就是上一行文字底线到下一行文字顶线之间的距离。 4.行内框：行内框是一
CSS3学习笔记-04-详解各种文本修饰
欢迎访问我的主页：https://www.bookbook.cc
07-03 8437
一、字体的使用 1.1定义字体 @font-face 二、字体样式 2.1 字重定义 font-weight 2.2 字号 font-size 2.3 行高设置 line-height 2.3 字体风格 font-style 2.4 组合写法 font 2.5 大小写转换 font-variant or text-transform 2.6 文本线条控制 text-decoration: 2.7 文本阴影 text-shadow 2.8 空白处理 pre or white-space 2.9 文本溢出处理
让几个元素在同一行对齐 vertical-align属性
weixin_55608554的博客
04-23 169
菜鸟教程
理解vertical-align
u012309349的博客
01-21 583
vertical-align用于对齐内连元素，其block属性取值可能为：inline、inline-block、inline-table。 （1）单个元素的baseline位置 文字：字母abcdefhiklmnorstuvwxzx的下边沿 图片：margin 底边 一个 inline-block 元素，如果里面没有内联元素，或者overflow不是visible，则...
CSS 垂直对齐vertical-align属性
热门推荐
歪脖先生的博客
02-13 3万+
垂直对齐在CSS中，行框的高度总是足以容纳它包含的所有行内级框，当一个行内级框 B 的高度小于包含它的行框高度时，则由 vertical-align属性 来决定B在行框中垂直对齐的位置。因此，vertical-align属性只对行内级元素有效，对块级元素无效。并且，该属性不能被子元素继承。在垂直对齐时，行内非替换元素的行内级框是由 line-height 的高度定义的框，即在内容区的上下各添加半行...
css之 vertical-align用法详解
平平无奇小码农的博客
03-11 2万+
vertical-align 属性设置元素的垂直对齐方式。 css中的vertical-align 属性只能用于 行内元素 和 置换元素（例如 图像和表单输入框） ，此属性不继承。 接下来我们用例子去分析这些值的意思及产生的效果： 首先我们先看一张图，文字的顶线、中线、基线，基线是字母x的下边缘 默认例子 <style> * { margin: 0; padding: 0; } div { width: 200px; line-height: 60
简单理解vertical-align
明日晴空的博客
01-24 1724
注：line-height 行高为0，文本基线是文本本身的一半高度； 一、vertical-align 基本值分类： 1.线类 baseline //默认。元素放置在父元素的基线上。 top //把元素的顶端与行中最高元素的顶端对齐。 middle //把此元素放置在父元素的中部。 bottom //把元素的顶端与行中最低的元素的顶端对齐。 2.文本类 text-top
vertical-align的使用
qq_42265289的博客
07-01 1990
vertical-align主要用于垂直对齐，作用对象为行内元素（含行内块），单元格。对块级元素及其内的元素无效。vertical-align不可继承，只能在子元素中单独使用值描述长度通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'百分值 – %通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'ba...
html.css.javascript-学习笔记
03-23
html.css.javascript-学习笔记
css vertical-align属性详细图解分析
09-27
vertical-align属性详细分析 最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。 vertical-align的值有点多，包括 baseline sub ...
font-awesome-ie7.min.css_fontawesome-4.2.0
09-27
可以兼容ie7的font-awesome-ie7.min.css 包含在 fontawesome-4.2.0内
jquery-ui.css
11-21
jquery-ui.css
移动端/PC端布局-flex布局
微木
05-22 115
flex布局详解
CSS常用的两种定位方式
代码有点萌的博客
05-23 353
relative定位是相对自身原始位置进行偏移。absolute定位是相对于最近的已定位（relativeabsolutefixedsticky）祖先元素进行偏移。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。相对自身原始位置进行偏移。元素仍占据原始位置的空间。用于微调元素位置，不会影响其他元素的布局。脱离文档流，相对于最近的已定位祖先元素进行定位。不占据空间，其他元素会忽略它的位置。用于精确定位元素，通常与relative定位的祖先元素配合使用。
Web开发——HTML&CSS
一切皆是定数的博客
05-20 405
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
SCSS基本使用
最新发布
mj256115的博客
05-23 405
SCSS（Sassy CSS）是一种 CSS 预处理器，它是 CSS 语言的一个扩展，增加了变量、嵌套规则、混合（mixins）、函数等功能，使得编写 CSS 更加高效和易于维护。SCSS 代码最终会被编译成标准的 CSS 代码。
.el-menu-vertical-demo.el-menu--collapse{
03-03
根据你提供的信息，".el-menu-vertical-demo.el-menu--colla" 是一个CSS选择器，用于选择具有 "el-menu-vertical-demo" 和 "el-menu--collapse" 类的元素。这个选择器常用于在网页中定位和样式化特定的菜单元素。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr_LiuP

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值