实际项目中，常常会遇到一排行内元素对齐排列的需求，但是往往它们是这样的

我们想要的其实是这样的

曾经我一度不得不使用定位来实现我想要的位置效果，将父元素设置 position:relative ,行内元素设置 position:absolute ,然后利用 top 和 left 实现定位

直到有一天我在看《HTML5与CSS3设计模式》

这本书的时候，学习到了 vertical-align 这个属性的时候，才发现有这么一个好方法

vertical-align：xpx ,x为正值，向上偏移，x为负值，向下偏移

但是可以发现，当想要通过 vertical-align 属性实现相对于容器上边对齐的时候，是实现不了的，因为很多元素实际占据的位置比展现出的空间大，当向上偏移过大的时候，元素无法超出容器，会把整体顶下来，类似于给父元素加了 padding-top ；

但是向下偏移的时候就不会出现这种问题，元素也可以超出容器。

利用vertical-align实现行内元素对齐的更多相关文章

  1. 行内元素对齐：display:inline-block;

    行内元素对齐:display:inline-block; 今天见到一个一行元素水平排列,但是对不齐啊,如图: 代码: div{ border: 1px solid red; } .wrap > ...

  2. 行内元素对齐各种问题--从line-height和vertical-align的角度分析

    最近研究行内元素的对齐问题,发现img不管怎么设置,下边都有一块留白,强迫症无法忍受未知,于是开始了查阅探索之旅. 辗转来到张鑫旭的博客,他对行内盒子模型做了详细的介绍,包括“幽灵节点”,“line- ...

  3. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  4. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  5. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  6. css菜鸟学习之text-align属性，行内元素，块级元素居中详解

    一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...

  7. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  8. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  9. li标签行内元素高度及居中

    <head> <title><title> <style type="text/css"> * { padding: 0px; ma ...

随机推荐

  1. 数据收集利器 cAdvisor - 每天5分钟玩转 Docker 容器技术（82）

    cAdvisor 是 google 开发的容器监控工具,我们来看看 cAdvisor 有什么能耐. 在 host 中运行 cAdvisor 容器. docker run \ --volume=/:/r ...

  2. IT 圈里有哪些经常被读错的词？

    原文链接:IT 圈里有哪些经常被读错的词? ()标相应英文单词[]标音标 =====公司/产品名===== Youtube (You-tube [tju:b]) 念 优tiu啵 不念 优吐毙Skype ...

  3. Java8之旅(七) - 函数式备忘录模式优化递归

    前言 在上一篇开始Java8之旅(六) -- 使用lambda实现Java的尾递归中,我们利用了函数的懒加载机制实现了栈帧的复用,成功的实现了Java版本的尾递归,然而尾递归的使用有一个重要的条件就是 ...

  4. （转）MySQL存储过程/存储过程与自定义函数的区别

    转自:http://www.cnblogs.com/caoruiy/p/4486249.html 语法: 创建存储过程: CREATE [definer = {user|current_user}]  ...

  5. Spring 组成

    Spring 主要由 Bean Context Core 三个组件组成 Bean 组件是整个 Spring 核心,Spring 通过管理 Bean 组件提供服务 Context 是 Bean 组件容器 ...

  6. PHP操作Memcached

    一.PHP连接Memcached: 一个简单的使用示例: $memcache = new Memcache; $memcache->connect("127.0.0.1",1 ...

  7. IntelliJ IDEA创建多模块依赖项目

    刚从Eclipse转IDEA, 所以记录一下IDEA的使用 创建多模块依赖项目 1. 新建父工程 这样就创建好了一个普通项目,一般我们会把src删掉,在此项目下新建新的模块 2. 新建子模块 创建供前 ...

  8. VS2008中C#开发webservice简单实例

    1.创建工程 文件-> 新建->网站 如下图. 工程建好后,会自动添加如下代码: using System; using System.Linq; using System.Web; us ...

  9. Phalanx

    Phalanx Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  10. 暑假练习赛 007 C - OCR

    C - OCR Description standard input/outputStatements Optical Character Recognition (OCR) is one of th ...