## 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错误2003：Can't connect to MySQL server (10060)

    1.网络不通. 检查能不能ping通. 2.防火墙设置. 防火墙是否放过mysql的进程,是否屏蔽了mysql的3306端口. 3.mysql的账户设置. mysql账户是否不允许远程连接.如果无法连 ...

  2. for循环操作数组

    if(!empty($data)){ $arr_length=count($data); //数组的步长 $array_keys_list=array_values($data); //数组的键值 f ...

  3. 【Android Developers Training】 82. 序言：传输数据时减少对电池寿命的影响

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  4. OSX MacVim + vim-lldb配置和使用心得

    Mac里面默认的编译器是clang/clang++ 所以debugger就选择了lldb 想搭配MacVim一起使用,于是就找到了vim-lldb这个插件,相当强大   这个插件支持Vundle,所以 ...

  5. ovs+dpdk numa感知特性验证

    0.介绍 本测试是为了验证这篇文章中提到的DPDK的NUMA感知特性. 简单来说,在ovs+dpdk+qemu的环境中,一个虚拟机牵涉到的内存共有三部分: DPDK为vHost User设备分配的De ...

  6. axis1.4开发webservice客户端(快速入门)-基于jdk1.4

    写在前面: 对于客户端,服务端开发好了以后,客户端只需要调用就可以了.这里我们讲的是,根据服务的访问地址,来生成客户端所需要用到的代码(听说有几种调用方式,但是用到最常见的就是stub方式,貌似我说的 ...

  7. @RequestParam与@PathVariable的区别

    在spring MVC中,两者的作用都是将request里的参数的值绑定到contorl里的方法参数里的,区别在于,URL写法不同. 使用@RequestParam时,URL是这样的:http://h ...

  8. Struts框架之 执行流程 struts.xml 配置详细

    1.执行流程 服务器启动: 1. 加载项目web.xml 2. 创建Struts核心过滤器对象, 执行filter  →  init()   struts-default.xml,    核心功能的初 ...

  9. 随记之 -- diy相册

    最近一段时间楼下在整修房子,一到早晨6点多的时候,电钻声.敲打声齐鸣,实在是不能好好的睡个安稳觉 (┳＿┳)... 这周六像往常一样,以为又要被惊醒了,所以早早的就醒了,谁知竟然出奇的安静,难道施工队 ...

  10. threejs里面的vector3源码解析

    // File:src/math/Vector3.js /** * @author mrdoob / http://mrdoob.com/ * @author *kile / http://kile. ...