## 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. 利用 Traceview 精准定位启动时间测试的异常方法 (工具开源)

    机智的防爬虫标识原创博客地址:http://www.cnblogs.com/alexkn/p/7095855.html博客求关注: http://www.cnblogs.com/alexkn 1.启动 ...

  2. svg制作风车旋转

    首先用ai画一个简单的风车 例如: svg代码: <animateTransform attributeName="transform" begin="0s&quo ...

  3. Struts2教程

    一.初识Struts2 Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的 ...

  4. Spring Boot 快速入门(一)

    简介  相信很多人都接触spring框架很长时间了,每次搭建spring框架的时候都需要配置好多的jar.xml,做很多繁琐重复的配置,稍微不留神就会出现各种各样的问题,每次调试真的是香菇.蓝瘦啊. ...

  5. example001点击隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 常见的JQuery应用举例

    在学习JS之后,JQuery(以下简称JQ)为我们提供了一种更加便捷和简单的操作模式,利用它开发人员将更为高效的进行工作,下面将一些常见的问题进行举例. 1.点击某处弹出提醒,例如某些游戏在注册时会弹 ...

  7. 关闭chrome浏览器的developer tools

    背景 Chrome使用过程中,很容易启动Chrome developer tools,一些误触如按到F12.CTRL+Shift+C等都会启动developer tools.对于不开发Web的人来说, ...

  8. 百万级数据mysql分区

    1. 什么是表分区? 表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分.从逻辑上看,只有一张表,但是底层却是由多个物理分区组成. 2. 表分区与分表的区别 分表:指的是通过 ...

  9. SQL数据库操作(CURD)

    对数据仓库的操作(CURD): 新增:  create database db_test; 新增的时候设置编码: create database da_test_1 character set utf ...

  10. VB6之调整任务栏按钮的位置

    好无聊,睡前一更~ XP的任务栏没办法像win7那样随意拖动交换顺序,偶觉不爽,遂写程序搞之.这个不算什么新东西,参考了很多别人写的东东. 程序启动后,会在右下角托盘区显示钢铁侠的图标.右键击之,可选 ...