## CSS2 vertical-align 垂直对齐



    - baseline   默认值.基于基线对齐

    - middle     位于同一行的非衬线字体小写字母的 1/2 处.不要为父元素设置高度和行高      

    - top           位于父元素一行的顶部

    - bottom    位于父元素一行的底部

    - text-top   位于同一行的文本的顶部

    - text-bottom 位于同一行的文本的底部

    - super       位于同一行的sub元素文本的基线对齐 <sup>上角标</sup>

    - sub          位于同一行的sub元素文本的基线对齐 <sub>下角标</sub> 

    

- 使用 vertical-align 在一行内，行内元素在垂直方向的对齐位置。

- vertical-align: 只能设置行内元素（inline inline-block)



#### 垂直居中对齐



    vertical-align: middle;

    text-align: center;



#### vertical-align 使用场景1： 一行内的垂直方向对齐

![](http://i.imgur.com/gqvFjtp.jpg)



####  vertical-align 使用场景2： 多行内的垂直方向对齐 

1. 为要垂直居中的子元素设置 ````vertical-align:middle````样式

2. 为该元素的父元素设置````display: table-cell````,并设置固定的高度

3. 然后再设置 ````vertical-align:middle````和水平对齐````text-align: center````

4. 当其元素设置为 ````display: table-cell````.并且宽度清零时，需要为父元素添加display: table;，并设置宽度100%



**可以把元素的所有内容（文本，子元素-inline, inline-block）都在垂直方向居中**



**在局部布局中使用display:table-cell;以减少对整体布局的影响**



        <style type="text/css">

            /*指定块元素图片垂直居中*/

            .box-table{

                display: table;

                width:100%;

            }

            .box {

                background-color: orange;



                height: 200px;

                display: table-cell;

                vertical-align: middle;

                text-align: center;

            }

            img{

                width: 100px;

            }

        </style>

    

        <script type="text/javascript"></script>

        </head>

        <body>

    

        <div class="box-table">

            <div class="box">

                <img src="img/bg.jpg" alt="">

            </div>

        </div>

        </body>

css2--垂直对齐的更多相关文章

  1. 垂直对齐：vertical-align属性——使用中注意事项

    1.vertical-align(垂直对齐),只对行内元素和单元格元素有效,例如属性为inline和inline-block的元素以及图片.输入表单等都是行内元素; 2.元素默认的垂直对齐方式为基线对 ...

  2. HTML 表格垂直对齐方式

    HTML表格标记教程(25):行的垂直对齐属性VALIGN在垂直方向上,可以设定行的对齐方式,分别有居上.居中.居下3种.基本语法<TR VALIGN="TOP">&l ...

  3. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  4. 【css基础】文本对齐，水平对齐，垂直对齐

    先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注 ...

  5. Xamarin.Android 水平对齐与垂直对齐

    水平对齐: 1.LinearLayout添加属性:android:orientation="vertical": 2.元件添加属性:android:layout_gravity=& ...

  6. CSS之垂直对齐

    vertical-align: baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text ...

  7. 垂直对齐：vertical-align：super属性

    <p style=”vertical-align:super;”>垂直对齐<span>上标</span></p> <p>元素默认为块级元素, ...

  8. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  9. vertical-align垂直对齐用法

    一.垂直对齐方式{vertical-align:middle/top/bottom:} <img>垂直对齐方式:1)给自身加vertical-align:再设置line-height即可: ...

  10. 使用vertical-align实现垂直对齐

    关于垂直对齐,之前研究过好几次了,但感觉每次都没研究透彻,做了几个效果,就觉得自己掌握了,实在是自欺欺人.真乃搞技术的大忌. 这两天又下定决心重新开始研究vertical-allign这个高深莫测的属 ...

随机推荐

  1. mysql 转义字符

    在用户提交表单的时候,有的用户会提交一些特殊字符,比如单引号双引号,此时,如果直接按正常字符串插入数据库的话,可能会出现无法正确插入数据库 PDO::quote 转义mysql语句中的单引号和双引号 ...

  2. 二维码生成api

    <img id='qrcode_img' src='http://qr.liantu.com/api.php?text={$wenzi}&w={$width}' /> http:/ ...

  3. linux下查找某个文件或目录

    以查找samba为例:find / -name samba 查找之后得到的结果集如下:/var/lib/samba/var/spool/samba/var/log/samba/usr/lib64/sa ...

  4. [leetcode-592-Fraction Addition and Subtraction]

    Given a string representing an expression of fraction addition and subtraction, you need to return t ...

  5. NPOI 表头、页眉页脚重复设置

    NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 ...

  6. KBEngine WebConsole Guide

    https://github.com/kbengine/kbengine/tree/master/docs

  7. KBEngine简单RPG-Demo源码解析(2)

    七:服务端资产库文件夹结构http://kbengine.org/cn/docs/concepts/directorys.html看assets, 注意:demo使用的不是默认的assets资产目录, ...

  8. H3CNE实验：H3C设备文件管理

    第1步:配置文件的管理操作 (1) save [ safely ]--在H3C设备上将当前配置保存到存储介质的根目录下. 快速保存方式:不带 safely 参数. 安全方式:带 safely 参数. ...

  9. JavaScript 原型与继承机制详解

    引言 初识 JavaScript 对象的时候,我以为 JS 是没有继承这种说法的,虽说 JS 是一门面向对象语言,可是面向对象的一些特性在 JS 中并不存在(比如多态,不过严格来说也没有继承).这就困 ...

  10. 解决window7 x64位Anaconda启动报错：AttributeError: '_NamespacePath' object has no attribute 'sort'

    最近论文需要用到python做数据分析,python语法简单,但是Windows下安装第三方包恶心的要命,statsmodels用pip死活安装不上,网上查了说包相互依赖windows下的pip不能下 ...