## 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. mkdirs自动创建文件夹

    //保存路径 如file路径是E:\filer\a.jpg File toSaveFile=new File("filePath"); if(toSaveFile!=null){ ...

  2. 多个form表单的提交

    if(zhengchang_stop&&no_zhengchang_wancheng&&respon_info_lists){ $('form[name="f ...

  3. 查看java线程cpu占用情况的脚本

    #!/bin/bash [ $# -ne ] && exit jstack $ >/tmp/jstack.log -o THREAD,tid,time|sort -k2nr| s ...

  4. python中的字符串编码

    获取字符串的编码类型: encodingdate = chardet.detect(str) chardet用于实现字符串的编码类型检测 chardet的下载地址:https://pypi.pytho ...

  5. [leetcode-565-Array Nesting]

    A zero-indexed array A consisting of N different integers is given. The array contains all integers ...

  6. accp8.0转换教材第10章Ajax和jQuery理解与练习

    C/S (Client/Server)结构,即大家熟知的客户机和服务器结构. B/S(Browser/Server)结构即浏览器和服务器结构. 认识ajax .XMLHttpRequest.使用jqu ...

  7. ecshop中smarty比较操作符(eq,ne,neq)含义

    eq相等, ne.neq不相等, gt大于, lt小于, gte.ge大于等于, lte.le 小于等于, not非, mod求模.  is [not] div by是否能被某数整除, is [not ...

  8. 参数错误。 (异常来自 HRESULT:0x80070057 (E_INVALIDARG))

    异常来自 HRESULT:0x80070057 (E_INVALIDARG)未能加载程序集.......几次删除引用然后重新引用程序集还是报错 奔溃中....网上搜索还真有解决办法:解决方法 是 删除 ...

  9. 最小生成树之Prim算法和Kruskal算法

    最小生成树算法 一个连通图可能有多棵生成树,而最小生成树是一副连通加权无向图中一颗权值最小的生成树,它可以根据Prim算法和Kruskal算法得出,这两个算法分别从点和边的角度来解决. Prim算法 ...

  10. Win7 JBOSS的下载安装、环境变量配置以及部署

    1. 下载安装 http://jbossas.jboss.org/downloads/ 我下载的是:JBoss AS7.1.1.Final 2. 解压安装包  D:\Java\jboss-as-7.1 ...