vertical-align:middle

该方法的使用需要注意:

1、在table中可以直接达到预期效果

2、在div中使用时,则需要定义行的高度line-height:60px;

原因在于:一个div中由很多行很多元素组成,vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个div而言的。而table的单元格是一行内的元素,因此vertical-align方法则可以达到预期的效果。

vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”,而且只作用于在同一行内的元素

它有下面几个参数baseline | sub | super | top | text-top | middle | bottom | text-bottom | 
baseline:与元素的基线对齐。
middle:与元素中部对齐。
sub:字下沉。
super:字上升。
text-top:文本顶部对齐。
text-bottom:文本底部对齐。
top:和本行位置最高元素对齐。
bottom:和本行位置最低元素对齐。

时间: 2024-09-29 22:27:27

vertical-align:middle的相关文章

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

自适应居中

一.窗体居中 1 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px; width: 165px; */ 简析: position:固定位置显示(absolute|fixed): [absolute:窗口大小由上层position为absolute.fixed.relative的子父关系窗口决定:fixed:窗口大小由上层层position为fixed的子父关系窗口决定] t

CSS实现完美垂直居中

之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 table 布局一样.不过最近有人问了几个例子,看来对此的需求还不少.现在就把我经验拿出来分享一下,希望大家鼓鼓掌. 首先,要有一个概念:凡是 table 布局可以实现的,CSS 一定可以实现.CSS 可以实现的,table 未必能做到. 现在来几个例子: 一.单行内容的居中只考虑单行是最简单的,无论是否

div仿checkbox表单样式美化及功能

div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: 0; bottom: 1px; width: 100 % ; height: 980px; z - index: 9; background - color: #000; filter: alpha(opacity = 50); - moz - opacity: 0.5; - khtml - opa

css 居中,中央

在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必须知道element的height & width. 2.vertical align middle 在element 里,只要知道父层的高,子层就能通过vertical align middle移动到中间,当然,父层同时也要有text align center,或者子层margin auto; d

&lt;img&gt;标签的align属性

align 属性用于定义图像相对应文本的位置 <p>图像 <img src="eg_cute.gif" align="bottom"> 在文本中</p> <p>图像 <img src ="eg_cute.gif" align="middle"> 在文本中</p> <p>图像 <img src ="eg_cute.gif"

Axure RP Pro 6.5的Align规则

主题 Axure RP Pro 6.5的Align规则 结论 以最先选择的对象为基准进行对齐 关键字 Axure RP Pro 6.5 Align规则 Align Left Align Center Align Right Align Top Align Middle Align Bottom 先选择1 安装Ctrl并选择2 右键选择Align --> Align Left 结果是以1为基准进行对齐 原文地址:https://www.cnblogs.com/rms365/p/10961588.h

8-Highcharts曲线图之对数直线图

<!DOCTYPE> <html lang='en'> <head> <title>8-Highcharts曲线图之对数直线图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js">

marguee实现文字的移动

用marguee标签实现文字的移动,二话不说直接上代码: <html> <meta charset="UTF-8"/> <title>会移动的文字</title> <body> <marquee direction="right">百度:自信的尘埃</marquee> <marquee onmouseover="stop()" onmouseout=&quo

关于垂直居中

做项目每次垂直居中的时候都折腾半天,在这边稍微整理一下垂直居中我所理解的一点知识吧. 1,行内元素 行内元素,比如,img,span等直接用vertical-align:middle,就可以搞定了. 2,块元素 垂直居中,最简单的方式是height:20px;line-height:20px;让他们相等,块元素就可以达到居中效果并且不破坏周围的布局. 还可以用绝对定位来布局,height:100px;position:absolute:top:50%:margin-top:-50px;也可以达到