CSS vertical-align(垂直对齐)

CSS vertical-align垂直对齐方式属性用于定义嵌入式或表格单元格框的垂直对齐方式。vertical-align是CSS的重要的特性之一。对于初学者来说,开始可能不容易掌握,文章底部给出了示例,方便您快速理解掌握该属性。

它能做什么它应用于内联或内联块元素。

它影响元素的对齐方式,而不影响其内容。(表格单元格除外)

当将其应用于表格单元格时,它将影响单元格的内容,而不是单元格本身。

CSS vertical-align垂直对齐值值描述

baseline它将元素的基线与父元素的基线对齐。这是默认值。

length它用于按指定的长度增加或减少元素的长度。也可以使用负值。

%它用于按“行高”属性的百分比增加或减少元素。允许为负值。

sub对齐元素,就好像它是下标一样。

super它对齐元素,就好像它是上标一样。

top它将元素的顶部与线上的最高元素的顶部对齐。

bottom它将元素的底部与该行的最低元素对齐。

text-top元素的顶部与父元素的字体的顶部对齐。

middle元素放置在父元素的中间。

text-bottom元素的底部与父元素的字体的底部对齐。

initial它将此属性设置为其默认值。

inherit从其父元素继承此属性。

CSS垂直对齐在线示例

示例html>

img.top {

vertical-align: text-top;

}

img.bottom {

vertical-align: text-bottom;

}

这是具有默认对齐方式的图像。

这是文本顶部对齐的图像。

这是具有文本底部对齐方式的图像。

测试看看‹/›

输出:

这是具有默认对齐方式的图像。

这是文本顶部对齐的图像。

这是具有文本底部对齐方式的图像。

html 垂直底端对齐,CSS vertical-align(垂直对齐)相关推荐

  1. html div居中左对齐,div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐

    div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐 使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右 居中 靠左对齐介绍篇) 实 ...

  2. html 设置图片左对齐,CSS设置图片的对齐

    CSS设置图片的对齐 横向对齐方式 图片的水平对齐方式和文字的水平对齐方式基本相同,分别是左.中.右三种方式,不同的是,图片的水平对齐通常不能直接通过设置图片的text-align属性设置,而是,通过 ...

  3. css如何实现文字两端对齐,CSS实现文字两端对齐的方法是什么

    CSS实现文字两端对齐的方法是什么 发布时间:2020-08-31 14:13:18 来源:亿速云 阅读:76 作者:小新 小编给大家分享一下CSS实现文字两端对齐的方法是什么,希望大家阅读完这篇文章 ...

  4. 按钮固定在页面底端html,css实现按钮固定在底部

    NSArray函数 1.判断是否包含某一个元素,返回1则表示有 - (BOOL)countainsObject:(id)anObject BOOL isContain = [arrayboy cont ...

  5. html元素垂直水平居中显示,关于css:html-元素垂直水平居中

    一. 不定宽高元素程度垂直居中 1.transform: translate() 程度垂直居中 .wrapper{ background-color: #eee; height:200px; } .c ...

  6. php垂直对齐,CSS垂直对齐不起作用的原因及解决方法

    verticla-align用于调整内联元素的垂直位置,但是有时候它不起作用,本篇文章将来给大家分享关于CSS垂直对齐不起作用的原因和解决方法. 我们先来分析一下导致垂直对齐无效的原因 我想很多人都会 ...

  7. 图片在框内平行css,CSS行内垂直对齐

    关于CSS行内对齐这一个话题,接触已久,只是一直以来没有什么兴趣来整理成文. 说到垂直对齐问题,在CSS中指的是行内垂直对齐,相关属性有 font-size.line-height.vertical. ...

  8. mysql 左对齐_CSS:左对齐标签,右对齐(CSS : Align label left, text right)

    CSS:左对齐标签,右对齐(CSS : Align label left, text right) 我有这样的文字: AAA : aaaaaaaaaaaaaaaaaa B : bbbbb CCCCC ...

  9. css设置水平坐对齐,CSS 水平对齐 (Horizontal Align)

    CSS 水平对齐 (Horizontal Align) 关于 CSS 中元素的水平对齐 (Horizontal Align),你可以使用多种属性来进行设置. 在CSS中,有几个属性用于元素水平对齐. ...

最新文章

  1. 彻底解决python打印结果省略号的问题显示宽度
  2. @程序员:Python 3.8正式发布,重要新功能都在这里
  3. 如何将 CentOS迁移到 AlmaLinux?
  4. Kanade Doesn’t Want to Learn CG 模拟,读题训练,临界
  5. 【字符串反转总结】Java中七种方法实现
  6. lda进行图片分类_LDA主题模型
  7. ThinkPHP6项目基操(18.实战部分 表单令牌Token 防CSRF)
  8. 大三软件工程小项目-小技术集合-客户端界面重画
  9. 单元测试:unittest.TestCase
  10. 微信开源推理加速工具 TurboTransformers,性能超越 PyTorch/TensorFlow 与主流优化引擎
  11. 《电子元器件的可靠性》——3.4节失效分布类型的检验
  12. layui多文件上传讲解_layui文件上传的实际应用实例
  13. Visual Studio 基础 之 VS 查看/反编译 C# dll 脚本代码的简单方法
  14. S TYLE N E RF: A S TYLE - BASED 3D-A WARE G ENERA - TOR FOR H IGH - RESOLUTION I MAGE S YNTHESIS
  15. #1_《经典控制理论复习》摘录
  16. 宏定义有无参数宏定义和带参数宏定义两种
  17. 获取本周周一和周末日期、上周周一和周末、下周周一和周末
  18. Windows、Mac系统常用的SSH工具软件整理汇总
  19. MySQL 安装步骤方法
  20. 树莓派4B安装系统,配置远程连接和WiFi,更新源,更新中文支持,基本Linux命令,用Python输出hello和“你好,世界”

热门文章

  1. 【Android】AlarmManager实现定时任务和取消任务
  2. 电感线圈绕制常用的漆包线
  3. 百度云虚拟主机中的网站不能加载静态js、css和images等文件的解决方案
  4. JavaScript—进阶篇
  5. 心知天气API如何调用与json数据如何显示
  6. java 笔记本i7 i5_笔记本i7低压cpu性能抵不过i5标压cpu,为什么还叫i7
  7. 自动复制吱口令html,支付宝吱口令自动复制 JavaScript 脚本代码 码上中国博客
  8. 【C++/CPP】OpenCV丨2. 常用操作丨1. 创建Mat丨
  9. python bind绑定失败_Python tkinter之Bind(绑定事件)的使用示例
  10. ios10之后的一些新特性