自学编程大概有大半年的时间了，从15年7月开始学习使用人数最多的JAVA，到后来喜欢上了前端，但由于之间在建筑设计院的工作加班颇为频繁，每天刨去工作，基本没有多少自己个人的时间，只能每天6,7点起床，挤出一个多小时的时间专研下，成效颇慢。终于在16年年初，下定决心，离开了工作2年的建筑设计院，现在家自学前端。每天7点起，十点半睡觉，白天可以全天学习，这样的状态自我感觉还是相当的满意。这是我写的第一篇博客，唠叨了些自己的事。下面开始技术正题：

（技术文档前声明：博主本人暂时还不专业，文章中或许会有很多欠缺或错误之处，望大家斧正，谢谢！）

　　刚刚学习前端的同学，在临摹网页的时候经常会希望能够实现“居中显示”的效果，而第一个想到的css属性应该是“vertical-align”,但很多时候却又发现并不管用。我们可以看到在W3C中的实例给的就是在table中实现垂直方向位置的改变。下面是实例截图。

点击按钮就可实现框中文本的位置改变到“bottom”即底部的位置。

而当把vertical-align运用在一些block元素上时，往往会无效技术上，某个CSS属性并不是在任何的HTML元素上都是生效。当一个新手将vertical-align属性应用到一个block元素(例如标准的<div>)上时，大多数浏览器会依照其不具备继承效果，而失效。

　　如果希望实现inline/inline-block元素在垂直方向居中的效果，可以尝试一下两种方法：

　　①

　　方法一的前提：

　　　　必要条件1：你需要把想要竖向居中的内容放到一个block元素中，并给这个想要居中的元素指定固定的高度。

　　　　必要条件2：绝对定位(absolutely-position)该元素。(通常这样做是没问题的，因为你这个想要居中的元素的父元素仍然可以使用相对位置)。

　　方法一的实现：

  • 　　　　1、指定父元素为position:relative 或 position:absolute。
  • 　　　　2、给子元素指定固定的高度。
  • 　　　　3、给子元素设定position:absolute 以及 top:50%，让子元素移动到父元素内部上下居中的位置。
  • 　　　　4给子元素设定 margin-top:-yy，这里的 yy 的值是你的子元素的高度的一半，弥补居中时的偏差。
  • Demo代码如下

　　　css代码部分

    •  <style type="text/css">
      
         #par { position:relative; height:300px; background-color: #f00;}
      
         #son { position:absolute; top:50%; border:1px solid #fff;height:100px;width:100px; margin-top: -50px;}
      
   </style>

      html代码部分

       <body>
      
     <div id="par">
      
         <div id="son">
      
         </div>
      
     </div>
      
 </body>
    • 实现效果如下图：

    • ②

当仅有一行文本时，则居中显示十分简单，通过设置该行文本的line-height==其父元素的height即可。由于过于简单，代码则不再展示。

（技术文档尾再次声明：此次为博主对此编写博客，本人暂时还不专业，文章中暂时还未涉及到如何使用vertical-align实现居中的效果，后续自己会多加研习，争取能够填补上。文中或许会有很多欠缺或错误之处，望大家指点，谢谢！）

通过vertical-align属性实现“竖向居中”显示的更多相关文章

  1. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  2. Android Hack1 使用weight属性实现视图的居中显示

    本文地址:http://www.cnblogs.com/wuyudong/p/5898403.html,转载请注明源地址. 如果要实现如下图所示的将按钮居中显示,并且占据父视图的一半,无论屏幕是否旋转 ...

  3. 重写TextView，实现圆形背景，文本居中显示

    最近,在做考试试题排版,产品提出题号希望显示成圆形背景,序号文本居中显示. (有点问题:文本没有绝对居中,暂时没做处理.) 为此,我采取的方式是重写TextView的onDraw方法,绘制一个圆形背景 ...

  4. 理解vertical-align或“如何竖向居中”<转>

    在各种技术论坛里经常会有这样的问题提出,“我如何能将这个东西竖向居中?”这个问题通常会跟随着这样一句话,“我使用了 vertical-align:middle,但是不管用! ” 这个问题其实有三个层面 ...

  5. 【html】合并单元格，并居中显示文本

     现状: 想要实现的效果: 代码实现: <tr> <td colspan=" align="center">用例失败为0,无测试详情</td ...

  6. 多个div居中显示

    页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...

  7. 【Android】自定义控件让TextView的drawableLeft与文本一起居中显示

    前言 TextView的drawableLeft.drawableRight和drawableTop是一个常用.好用的属性,可以在文本的上下左右放置一个图片,而不使用更加复杂布局就能达到,我也常常喜欢 ...

  8. Wtl之奇技淫巧篇：一、SDI如何居中显示视图

    Wtl的sdi应用,视图默认铺满框架的客户区.视图通常用modeless对话框,所有的界面元素都拥挤在左上角,这明显很丑陋.我们尝试让视图居中显示,保持原始大小,这是个很典型的问题,看似简单,诸多细节 ...

  9. line-height让文本在块级元素中居中显示总结

    一.总结: line-height不仅可以用在段落文本中控制行与行之间的间距,还可以用来控制文本在li这种块级元素中的位置. 文本行间距的大小由字体的大小决定,行间距的大小的设置方法有5种方式:

随机推荐

  1. 题目1003：A+B(字符串转数字)

    问题来源 http://ac.jobdu.com/problem.php?pid=1003 问题描述 每次给你两个数,数的形式是每三位有一个间隔符',',计算两数之和. 问题分析 两个问题,一.如何读 ...

  2. The Annoying Bug

    log里看不出问题,直接客户端就disconnected. gdb 挂了也不会停住,继续跑得跟正常人似的 再连根本不正常的了. 硬件: a , 主板CPU更换过 b,USB3.0 软件: 无有更换,但 ...

  3. [转] 如何在 CentOS7 中使用阿里云的yum源

    [From] https://www.cnblogs.com/lpbottle/p/7875400.html 1. 备份原来的yum源 mv /etc/yum.repos.d/CentOS-Base. ...

  4. Mac下利用SSH进行传输文件（转）

    //1.从服务器上下载文件 scp username@servername:/path/filename /var/www/local_dir(本地目录) //例如scp root@192.168.0 ...

  5. mongoDb数据库可视化工具 --- Robo

    工具下载: https://robomongo.org/download 最终效果: 即我们可以直接看到链接到 27017端口 的数据的所有数据,并且可以对其进行行之有效的增删查改. 注意,在下载软件 ...

  6. Jmeter创建FTP测试计划

    创建FTP测试计划 在这一章,你将学习如何创建一个基础的测试计划来测试FTP站点.你将在一个FTP站点上的两个文件中创建四个用户来发送请求.并且,你将告诉用户运行测试两次.所以,总的请求数是(4个用户 ...

  7. FS及CacheFS类解读

    Javac中有FSInfo与CacheFSInfo两个类,CacheFSInfo继承了FSInfo类,这两个类的主要功能就是通过map缓存Jar文件,核心代码如下: private Map<Fi ...

  8. 【LeetCode题解】7_反转整数

    目录 [LeetCode题解]7_反转整数 描述 方法一 思路 Java 实现 类似的 Java 实现 Python 实现 方法二:转化为求字符串的倒序 Java 实现 Python 实现 [Leet ...

  9. 你知道吗， CoreGraphics绘图系统和Bezier贝塞尔曲线坐标系的顺时针方向是相反的！

    UIBezierPath是对Core Graphics框架的一种上层封装,目的是让绘图需求可以被更方便的使用. 那你有没有发现被UIBezierPath封装后与之前有什么改变? 答:有三个变化. 1. ...

  10. Bitcoin交易及验证

    目录 UTXO 理解 交易的结构 交易的确认 交易验证 逆波兰表示法 使用逆波兰表示法验证交易 UTXO 理解 未花费交易输出: Unspent Transxtion output UTXO---用比 ...