文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

你可能还不知的 7 个 CSS 好用的属性

就像定义说的，这个属性允许你垂直对齐文本。它对于顺序指示器(st, nd等)、需要的输入星号(*)或没有正确居中的图标特别有用。...baseline: 使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如 ，这意味着这些元素使用此值的表现因浏览器而异。...sub：使元素的基线与父元素的下标基线对齐。 super：使元素的基线与父元素的上标基线对齐。 text-top：使元素的基线与父元素的上标基线对齐。...text-bottom：使元素的底部与父元素的字体底部对齐。 middle：使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。 ?...2. writing-mode writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

1.3K20

HTML元素分类：inline、inline-block、block

，上下无效；padding设置上下左右都有效，即会撑大空间,行内元素尺寸 由内含的内容决定，盒模型中 padding, border 与块级元素并无差异...，都是标准的盒模型，但是 margin 却只有水平方向的值，垂直方向并没有起作用。...可变元素 可变元素为根据上下文语境决定该元素为块元素或者内联元素。 　　...* applet - java applet 　　* button - 按钮 　　* del - 删除文本 　　* iframe - inline frame 　　* ins - 插入的文本 　　...3、垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。

1.5K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【CSS】vertical-align 垂直对齐 ( 块级元素对齐 | 行内元素 行内块元素对齐 | 基线对齐 | 垂直居中 | 顶部对齐 | 底部对齐 )

    一、取消文本域拖拽 块级元素对齐 : 浏览器居中对齐 : 设置 margin: 0 auto; 样式 ; 内部水平居中 : 设置 text-align: center; 样式 ; 内部垂直居中 : 行高...可以设置四种对齐 : baseline 基线 / top 顶线 / middle 中线 / bottom 底线 ; 基线对齐 : 图片底部位置 与 文字基线 对齐 ; 这是默认的对齐方式 , 如果是...p , 则 p 的下半部分在图片的下方 ; vertical-align: baseline; 垂直居中 : 图片中心位置 与 文字中线 对齐 ; vertical-align: middle; 顶部对齐... div { border: 1px solid red; margin: 20px; } .one { /* 基线对齐 - 默认 图片底部与文字基线对齐 *...="one"> 基线对齐 : 图片底部与文字基线对齐 中线对齐 : 图片中心与文字中心对齐

    3.6K30

    关于 vertical-align 你应该知道的一切

    前言 vertical-align，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，垂直对齐，主要目的用于将相邻的文本与元素对齐。...我们对于它的直观定义是与 text-align:center 相类似，一个控制水平方向对齐方式，一个控制垂直方向对齐方式。但是在很多情况下，我们发现设置属性之后并没生效。...对于内联元素指的是元素的垂直中心点与行框盒子基线往上 1/2x-height 处对齐，简单点说就是字母 X 的中心位置对齐；对于 table-cell 元素，指的是单元格填充盒子相对于外面的表格行居中对齐...文本类 “text-top，指的是盒子的顶部和父级内容区域的顶部对齐，即与 content-area 顶部对齐。...子元素的垂直中心线与父级元素基线的位置往上二分之一 X 高度（X 的中心） 所在线对齐，通俗一点讲，就是图中红线表示父元素的垂直中心线，蓝线表示子元素的垂直中心线，可以明显的看到 蓝线 与 X 的中心保持一致

    2.8K20

    CSS进阶05-行内格式上下文IFC

    盒的垂直对齐方式则不一：可能按底部或者顶部对齐，又或者按它们内容文本的基线对齐。包含了形成一行的那些盒的矩形区域被称为行盒 Line Box 。 2....这在不同字体的文本列必须对齐时非常重要，比如在table中。 2.3 垂直对齐属性vertical-align ? vertival-align 此属性影响行内级元素生成的盒子在行盒内的垂直定位。...对于其他所有元素，用于对齐的盒是margin box。 baseline 将盒的基线与父盒的基线对齐。如果盒没有基线，将其bottom margin edge与父盒的 baseline 对齐。...middle 把盒的垂直中点同父盒的基线加上父盒一半的 x-height 对齐。 sub 把盒的基线降到父盒的下标的适当位置。（此值对元素文本的字号无影响。）...然而，它可能高于其所包含的最高盒（例如，如果盒子是对齐的，以便基线对齐）。当一个盒子B的高度小于包含它的行盒的高度时， 行盒内 B 的垂直对齐方式由 vertical-align 属性决定。

    1.7K30

    css教程之文本字体

    normal 默认处理方式 pre 原封不动的保留你输入时的状态 nowrap：强制所有文本在同一行内显示 2.word-break 定义元素内容文本的字间与字符间的换行行为 normal：...p{text-indent:20px;} 7.vertical-align 定义行内元素在行框内的垂直对齐方式 span/a/em/label baseline：把当前盒的基线与父级盒的基线对齐...如果该盒没有基线，就将底部外边距的边界和父级的基线对齐 sub：把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小） super：把当前盒的基线提升到合适的位置作为父级盒的上标...（该值不影响该元素文本的字体大小） text-top：把当前盒的top和父级的内容区的top对齐 text-bottom：把当前盒的bottom和父级的内容区的bottom对齐 middle：把当前盒的垂直中心和父级盒的基线加上父级的半...x-height对齐 top：把当前盒的top与行盒的top对齐 bottom： 把当前盒的bottom与行盒的bottom对齐 8.line-height 定义元素中行框的最小高度 9.

    1.2K40

    【移动端网页布局】流式布局案例 ② ( 实现顶部固定定位提示栏 | 布局元素百分比设置 | 列表样式设置 | 默认样式设置 )

    45px; } 3、列表项设置 下面的列表包含 4 个列表项 , 为其设置左浮动 , 可以令四个列表项水平排列 , 并且没有默认的内外边距 ; 设置其 行高 = 内容高度 = 45 像素 , 令其中的文本内容垂直居中...; 这里特别注意 , 默认的图片对齐方式是基线对齐 , 只要不是基线对齐 , 随便设置 顶部 / 底部 / 中部 对齐都可以实现图像居中 ; .app ul li:nth-child(1) img {.../* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */ width: 10px; } .app ul li:nth-child(2) img { /* 在 10%...只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } 建议为图像设置一个总体默认样式 , 默认的基线对齐是个大坑...; img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle

    2K10

    CSS高级技巧 CSS用户界面样式

    垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气 vertical-align : baseline |top |middle |bottom 设置或检索对象内容的垂直对其方式。...vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。 ?...图片、表单和文字对齐 所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。...去除图片底侧空白缝隙 有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。...让图片不要和基线对齐。 给img 添加 display：block; 转换为块级元素就不会存在问题了。 溢出的文字隐藏 word-break:自动换行 normal 使用浏览器默认的换行规则。

    2K31

    简单说 CSS的vertical-align

    定义和用法 vertical-align 属性设置元素的垂直对齐方式。 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。...元素放置在父元素的基线上*/ vertical-align: sub; /*垂直对齐文本的下标*/ vertical-align: super; /*垂直对齐文本的上标*/...vertical-align: text-top; /*把元素的顶端与父元素字体的顶端对齐*/ vertical-align: text-bottom; /*把元素的底端与父元素字体的底端对齐。...*/ vertical-align: middle; /*把此元素放置在父元素的中部*/ vertical-align: top; /*把元素的顶端与行中最高元素的顶端对齐*/...我们能看见，图片是和文字x的下边缘，也就是基线对齐的，并不是和底线对齐。 现在我们调整图片的 vertical-align 属性值 为bottom，看看会怎样 <!

    1.4K31

    CSS用户界面样式

    垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气 vertical-align : baseline |top |middle |bottom  设置或检索对象内容的垂直对其方式。...vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。 ?...图片、表单和文字对齐 所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。...去除图片底侧空白缝隙 有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。...让图片不要和基线对齐。 给img 添加 display：block; 转换为块级元素就不会存在问题了。 溢出的文字隐藏 word-break:自动换行 normal 使用浏览器默认的换行规则。

    1.8K40

    canvas文本操作

    cv.stroke(); //文字属性设置 cv.font="35px 宋体"; cv.fillStyle="aqua"; cv.textAlign='center';//基线在文字的什么位置...,lift,中间,right默认left cv.textBaseline="buttom";//基线在文字的上,下,中间,默认bottom cv.fillText('突如其来的装逼让我无法呼...,300,300,1000); cv.fill(); 需要制定文字参考线对于参考 参考线绘制完成后制定文本对齐方式 水平对齐方式cv.textAlign取值left...,right,center,默认left 垂直方向对齐cv.textBaseline取值有top,bottom,middle,默认bottom ps:对齐方式说明,取值的对齐方式与位置相反,即水平取值left...,文本在右侧,垂直取值top文本在下面,可以简单理解,取值与文本的实际文字相反,另一种就是取什么值哪个参考线在文本什么方向 ---- 获取文本实际宽度 contetx.measure()方法获取文本宽度

    39520

    HTML5+CSS3常见布局方式

    这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变...这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 ...，起点在上沿；column-reverse：主轴为垂直方向，起点在下沿 justify-content 定义了项目在主轴上的对齐方式 flex-start（默认值）左对齐；flex-end：右对齐；center...：居中；space-between：两端对齐，项目之间的间隔都相等,弹性盒子元素会平均地分布在行里，两端靠边；space-around：每个项目两侧的间隔相等 align-items 定义项目在侧轴(纵轴...)方向上的对齐方式 flex-start：侧轴轴的起点对齐；flex-end：侧轴轴的终点对齐； center：侧轴轴的中点对齐；baseline: 项目的第一行文字的基线对齐；stretch（默认值）

    1K20

    CSS属性汇总--(6) 定位属性3

    Js语法：object.style.top="50px" 12.vertical-align          vertical-align 属性设置元素的垂直对齐方式。         ...该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。         ...元素放置在父元素的基线上 sub           垂直对齐文本的下标。...super        垂直对齐文本的上 top            把元素的顶端与行中最高元素的顶端对齐 text-top     把元素的顶端与父元素字体的顶端对齐 middle      把此元素放置在父元素的中部...bottom     把元素的顶端与行中最低的元素的顶端对齐 text-bottom  把元素的底端与父元素字体的底端对齐 length % 下面的例子演示了如何在文本中垂直排列图象：

    1.8K20

    「Adobe国际认证」平面设计师的，终极排版术语综合指南，都包含了哪些设计要点？

    字体与字体 这两个术语经常被混淆，但是字体与字体之间是有区别的。字体，有时也称为字体系列，是指字母和数字的设计（字母的外观）。 字体是指在字体本身内分类的不同粗细和样式。...文本对齐 文字在设计中的哪个位置？ 一般来说，对齐是将某物排列在一条直线上。在排版中，“某物”就是字符。不同的对齐方式为观众创造了不同的阅读体验。做出明智的选择。 剩下 段落左对齐，而右侧不规则。...例如，这篇文章的大部分内容都是左对齐的。 对 段落向右对齐，而左侧不规则。这种类型的对齐很少使用。 中心 段落居中对齐，左右两边不规则对齐。...居中文本不应用于完整文档，而应用于短文本，例如标题、引述或短诗。 有理 左右对齐对齐，使段落看起来整洁。这怎么可能？单词之间有不规则的空格，以填补两边的空白。不一定赏心悦目。...垂直轴表示零垂直应力。 比衬线或喙小的主笔画的突出部分。 就像一朵花，茎是把一切联系在一起的东西。它是直立字符的主要垂直笔划。 字体中字符间笔划宽度的变化。

    72900

    「后端小伙伴来学前端了」记录自己的踩坑第一天 | CSS:vertical-align 属性

    前言 最近老师让大家单独写前后端分离项目，真是大家卷完后端，一起去卷前端了。（我以前都是主要负责后端，处于只大致看的懂的级别，说多了都是泪啊）。...CSS：vertical-align 属性 vertical-align 属性设置元素的垂直对齐方式。...元素放置在父元素的基线上。 sub 垂直对齐文本的下标。...super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 顶端对齐 middle 居中对齐 bottom 把元素的顶端与行中最低的元素的顶端对齐。...text-bottom 把元素的底端与父元素字体的底端对齐。底端对齐 inherit 规定应该从父元素继承 vertical-align 属性的值。

    35430

    前端基础篇之CSS世界

    vertical-align vertical-align的属性值 线类：如baseline（默认值） top middle bottom（baseline使元素的基线与父元素的基线对齐，middle使元素的中部与父元素的基线往上...top bottom使元素及其后代元素的底部与整行或整块的底部对齐。） 文本类：text-top text-bottom（使元素的顶部与父元素的字体顶部对齐。）...上标下标：sub super（使元素的基线与父元素的下标基线对齐。） 数值：20px 2em （默认值baseline相当于数值的 0 。...使元素的基线对齐到父元素的基线之上的给定长度，数值正值是基线往上偏移，负值是往下偏移，借此可以实现元素垂直方向精确对齐。）...然而其基线却不会改变，在字母 x 下边缘。 此时i标签的基线发生错位，位移到下面与幽灵空白节点基线对齐，导致产生了间隙。 所以只需要再改变i标签的对齐方式，就能彻底清除间隙：地址 ?

    2.1K50

    CSS深入理解学习笔记之vertical-align

    1、vertical-align基本认识 　　支持的属性值： 　　　　①线类：baseline（默认），top，middle，bottom 　　　　②文本类：text-top，text-bottom 　　　　...3、vertical-align与line-height 　　流式布局多余的空白处理： ?  ...vertical-align:middle 　　　　定义：①inline/inline-block元素：元素的垂直中心点和父元素基线往上1/2x-height处对齐；②table-cell元素：单元格填充盒子相对于外面的表格行居中对齐...注：vertical-align仅与父级的font-size有关。 应用环境： ?...定义：提高/降低盒子的基线到父级合适的上/下标基线位置。 7、vertical-align前后不一的行为机制 　　应用： ? 　　注：关注当前元素和父级，前后并没有直接影响。

    1.1K50
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券