`

解析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 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明

    这两天写个页面css的时候用到了vertical-align属性,使用过程中踩到了坑,所以总结如下: 1.vertical-align的语法 vertical-align属性的具体定义列表如下: 语法: vertical-align : baseline | sub | super | top |...

    text-align,vertical-align,line-height居中布局

    text-align,vertical-align,line-height居中布局笔记

    css vertical-align属性详细图解分析

    vertical-align属性详细分析 最近几天仔细研究了一下vertical-align这个属性,结果让我大吃一惊,这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。 vertical-align的值有点多,包括 baseline sub ...

    深入理解CSS中的vertical-align属性和基线问题

    vertical-align属性主要用于改变行内元素的对齐方式,对于行内布局影响很大,如果不了解的话,我们开发调整样式的时候很容易出错。 网上关于这个属性的原理说得很是复杂,看一眼就让人觉得望而生畏,而且大可不必...

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

    vertical-align是个相当复杂与精深的属性,所理解的一些内容多少会有不准确之处,例如之前我认为inline属性的元素对vertical-align属性是不感冒的,但是在同行的提醒下,我自己一测试,发现完全不是之前自己所想的,...

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

    就说说我对vertical-align属性的一些理解吧,纯属个人见解,若有不准确之处还望见谅,若有不准确之处还望见谅。还有,vertical-align属性牵扯到的知识实在是太多了,不是一篇文章就可以讲清楚的,这里我就只挑几个...

    CSS标准:vertical-align属性

    原文:http://www.mikkolee.com/13最近几天仔细研究了一下vertical-align这个属性,结果让我大吃一惊,这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。vertical-align的值有点多,包括 baseline sub...

    CSS实例:vertical-align属性让网页层居中

    CSS实例:vertical-align属性让网页层居中. vertical-align属性使网页层居中 网页源代码如下: <html><head><style>body{TEXT-ALIGN: center;}#center{MARGIN-RIGHT: auto;MARGIN-LEFT: auto;...

    text-align,vertical-align,line-height居中布局笔记

    text-align,vertical-align,line-height居中布局笔记

    深入理解css中vertical-align属性

    一、为什么要写这篇文章 今天看到一个问题: 两个div 都设置 display:inline-block,正常显示;但是在第二个div中加一个块级元素或者内联元素,.../* vertical-align: top;*/ } </style> <body> </div>

    CSS教程:vertical-align的值

    最近几天仔细研究了一下vertical-align这个属性,结果让我大吃一惊,这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。 最近几天仔细研究了一下vertical-align这个属性,结果让我大吃一惊,这个很...

    CSS属性探秘系列(四):vertical-align

    一、前言vertical-align对于初学者最常见的使用是在表格中了,尤其是...3.vertical-align属性值各浏览器兼容性?4.vertical-align如何实现图片的垂直居中?5.vertical-aling如何实现input[type=’checkbox’],input[typ

    使用vertical-align实现input和img对齐

    将input和img放同一行,img标签总是比input高出一个头,...后来无意中发现同时给input和img添加vertical-align:middle就行: 复制代码代码如下:input,img{vertical-align:middle;} 这样代码就会规规矩矩地水平对齐了。

    vertical-align 表单元素垂直对齐的解决方法

    首先,搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点: 1、vertical-align:middle的时候,是该元素的中心对齐周围元素的中心。 2、这里...

    利用vertical-align:middle实现行内元素的水平垂直居中对齐

    最终实现效果为实现行内元素的水平、垂直居中对齐,效果图如下... 利用vertical-align实现图片垂直居中对齐 </title> <style> #content { position:absolute; top:0;right:0;bottom:0;left:0; margin:auto;

Global site tag (gtag.js) - Google Analytics