`

解析vertical-align属性

阅读更多

vertical-align


该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
即:1.只对行内元素起作用(若属性中有display:inline-block;或float此属性都不起作用)
      2.可以定义图片与文字的对齐方式
      3.表格中内容的对齐


baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length  
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
  • 大小: 39.3 KB
分享到:
评论

相关推荐

    css vertical-align属性的一些理解与认识(一)

    然而,由于浏览器的兼容性和解析差异,使用`vertical-align`时可能需要进行额外的浏览器兼容性测试,特别是在涉及百分比值时。对于复杂的布局问题,可能需要结合`display`、`position`和其他CSS属性共同调整,以达到...

    CSS进阶:Transform、Transition、Animation及Vertical-align详解

    本文主要介绍了CSS中的Transform属性、Transition过渡动画、关键帧Animation以及Vertical-align属性的功能特性和用法。通过对这几个重要的布局排版相关技术细节展开解析,并提供了多个使用场景的具体示例进行说明,...

    div vertical-align不起作用解决办法

    在网页布局设计中,`vertical-align` 属性通常用于调整元素在垂直方向上的对齐方式。然而,有时候我们可能会遇到 `div vertical-align` 不起作用的情况。这通常是由于多种原因导致的,其中最常见的一个原因是文档...

    css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明

    下面将详细解析`vertical-align`属性及其常见用法。 1. `vertical-align`的语法和值: - `vertical-align`的语法是:`vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom...

    本文的主角 vertical-align使用介绍

    本文将深入解析`vertical-align`的使用,帮助你构建更完善的CSS世界观。 首先,`vertical-align`属性的值可以是长度单位(如像素、百分比等)或者是预定义的关键字,如`top`、`middle`、`bottom`等。当使用长度单位...

    谷歌浏览器 div 水平对齐

    然而,由于不同浏览器对某些 CSS 属性的解析方式存在差异,这可能导致在 IE 和其他现代浏览器中表现不一致。 方案一:使用表格模拟布局 此方案利用 `display: table` 和 `display: table-cell` 来模拟表格布局。...

    css(样式表属性)

    - **垂直对齐(Vertical Align)**:`vertical-align` - 示例: - `vertical-align: sub;` 设置下标。 - `vertical-align: super;` 设置上标。 - `vertical-align: top;` 设置元素顶部与父容器顶部对齐。 - `...

    div垂直居中的N种方法

    本文将深入探讨并演示多种实现DIV垂直居中的方法,包括但不限于使用CSS的`height`, `line-height`, `padding`, `display`属性,以及如何通过`vertical-align`属性配合特定的HTML结构来达到目标。 #### 方法一:...

    表格样式1

    关于表格的垂直居中对齐,`vertical-align`属性在表格布局中扮演了重要角色。默认情况下,单元格内容在垂直方向上居中。你可以根据需要调整这个属性,例如: ```css td { vertical-align: top; /* 内容贴顶 */ } ...

    多浏览器下IE6 IE7 firefox li 间距问题

    1. **解决IE5下`<li>`元素间距问题**:若`<li>`元素设置了固定宽度,则需在该元素的CSS定义中添加`vertical-align: bottom;`属性。 2. **宽度定义位置**:避免直接在`<ul>`元素中定义宽度,最好在`<li>`元素或外部...

    div所有属性介绍 和各种用法

    在探讨“div所有属性介绍和各种用法”这一主题时,我们不仅会深入解析div元素的基本属性,还将拓展到CSS中与div相关的样式属性,这些属性使得div成为了网页布局和设计中的核心元素之一。 ### div的基本概念 div是...

    css属性的各种定义

    - **垂直对齐方式**:`vertical-align`属性用于设置行内元素的垂直对齐方式,如`vertical-align:sub;`使文本下标显示。 - **文本修饰**:`text-decoration`可以添加下划线、删除线等,如`text-decoration:underline;...

    Jsp中如何让图片在div中居中

    1. 设置div元素的display属性为table-cell,并且利用vertical-align属性设置为middle来实现垂直居中。 2. 将图片元素的margin设置为0 auto,以实现水平居中。在不指定具体值的情况下,0 auto会使元素在其包含块中...

    CSS行内框架构

    - **垂直对齐:vertical-align 属性**:`vertical-align`用于控制行内元素或表格单元格的垂直对齐方式。 深入理解这些概念对于创建响应式和易读的网页至关重要。正确使用行高和相关属性能够优化布局,提高用户体验...

    input域问题.txt

    - 例如,当需要使多个 inline-block 元素在同一行上垂直居中对齐时,可以设置它们的 `vertical-align` 属性为 `middle`。 4. **`vertical-align` 的具体取值:** - `text-bottom`: 元素的下边缘与同一行内其他...

    CSS 中文手册详解

    `vertical-align` 属性用于垂直对齐内联元素。可以取值: - `baseline`:基线对齐。 - `sub`:下标对齐。 - `super`:上标对齐。 - `top`:顶部对齐。 - `text-top`:文本顶部对齐。 - `middle`:中间对齐。 - `...

    HTML热门面试题及详细解析

    vertical-align: middle;`,Div 设置 `display: inline-block; vertical-align: middle;`。也可以使用 CSS3 transform:父盒子设置 `display: relative;`,Div 设置 `transform: translate(-50%, -50%); position: ...

    img与容器下边界的空隙(缝隙) 的解决方法

    通过设置img标签的CSS属性`vertical-align`,可以改变图片的对齐方式。常见的设置包括`vertical-align: bottom;`、`vertical-align: middle;`或`vertical-align: top;`。例如,将`vertical-align`设置为`bottom`,...

Global site tag (gtag.js) - Google Analytics