## 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. sql嵌套批量更新

    嵌套批量更新 UPDATE CheLiang SET lineName = t.linename FROM TeamJiHua t ,CheLiang tc WHERE t.id = tc.teami ...

  2. mysql数据库和mongodb数据库的相关操作以及两个数据库的区别

    在docs命令中执行数据操作 MySQL数据库 先启动MySQL服务器  net start mysql 进入MySQL服务器MySQL -uroot -p(这里写你的数据库密码) (-P是从哪个端口 ...

  3. JAX-RS REST 服务结果的自动封装

    如转发请注明: 原文luyiisme博客 当使用遵循 JAX-RS 标准的框架开发REST 服务时,我们倾向于定义个(含有JAX-RS)注解接口. 服务器端负责实现该接口,而客户端是该接口的代理进行远 ...

  4. MacTex XeLaTex xdvipdfmx:fatal: pdf_ref_obj(): passed invalid object. 报错的解决方法

    在使用MacTex配合TexStudio编译beamer的时候,爆出如下错误, xdvipdfmx:fatal: pdf_ref_obj(): passed invalid object. 结果尝试其 ...

  5. Spring+SpringMVC+MyBatis深入学习及搭建(十六)——SpringMVC注解开发（高级篇）

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7085268.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(十五)——S ...

  6. 论MyBatis日志

    Mybatis内置的日志工厂提供日志功能,具体的日志实现有以下几种工具: SLF4J Apache Commons Logging Log4j 2 Log4j JDK logging 具体选择哪个日志 ...

  7. tcp/ip通信传输流

    利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信,发送端从应用层往下走,接收端则往应用层方向走. 我们用HTTP进行举例 客户端在应用层发出想要看到某个web页面的http请求.HT ...

  8. webpack3中文版使用参考文档--全面解析webpack.config.js

    Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...

  9. （转载）Bonding技术指南

    原文链接:http://www.wushiqin.com/?post=68 一.什么是网卡绑定及简单原理 网卡绑定也称作"网卡捆绑",就是使用多块物理网卡虚拟成为一块网卡,以提供负 ...

  10. Bootstrap选项卡

    前面的话 选项卡Tabs是Web中一种非常常用的功能.用户点击对菜单项,能切换出对应的内容.本文将详细介绍Bootstrap选项卡 基本用法 Bootstrap框架中的选项卡主要有两部分内容组成: 1 ...