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

我们想要的其实是这样的

曾经我一度不得不使用定位来实现我想要的位置效果，将父元素设置 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. Django REST FrameWork中文教程3:基于类的视图

    我们也可以使用基于类的视图编写我们的API视图,而不是基于函数的视图.我们将看到这是一个强大的模式,允许我们重用常用功能,并帮助我们保持代码DRY. 使用基于类的视图重写我们的API 我们将首先将根视 ...

  2. mybatis逆向工程

    一.背景 在实际开发中我们会自己去写mapper映射文件,接口,数据库表对应的实体类,如果需求任务比较少,咱们还可以慢慢的一个一个去写,但是这是不现实的,因为在工作中我们的任务是很多的,这时mybat ...

  3. ubuntu 下修改文件访问权限chmod 777 -R *血的教训！没事别乱开权限！用谁开谁的就行。。。最后不要用这个命令，文件操作全部改用终端

    本文转自: 个人建议 Ubuntu下修改目录权限命令如下:chmod 600 name (只有所有者有读和写的权限)chmod 644 name (所有者有读和写的权限,组用户只有读的权限)chmod ...

  4. wordpress 显示数学公式 (MathJax-LaTeX)

    blog 不放一堆数学公式怎么能显得高大上,所以 MathJax-LaTeX 也是必装的插件之一了. 一.安装 MathJax-LaTex 插件 直接在 wordpress 插件中,搜索并安装 Mat ...

  5. 企业微信开发之向员工付款（C#）

    一.企业微信API 地址:http://work.weixin.qq.com/api/doc#11545 二.参数说明 1.向员工付款 请求方式:POST(HTTPS)请求地址:https://api ...

  6. C语言 数组名不是指针

    今天上计算机系统课的时候老师讲到了C中的聚合类型的数据结构.在解释数组名的时候说"数组名是一个指针,指向该数组的第一个元素",附上ppt(第二行): 我觉得这是不正确的,是一个常见 ...

  7. 深入理解final和static关键字

    深入理解final和static关键字 参考:http://blog.csdn.net/qq1028951741/article/details/53418852 final关键字 final关键字可 ...

  8. C# AOP 面向切面编程之 调用拦截

    有时候我们需要在代码中对方法调用进行拦截,并修改参数和返回值,这种操作叫做AOP(面向切面编程) 不过需要注意的是,AOP的效率很慢,在需要高效率场合慎用. 以下是C#的AOP方法: 首先建立一个控制 ...

  9. LeetCode 617. Merge Two Binary Tree （合并两个二叉树）

    Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...

  10. oracle实用基础

    Oracle修改字段名 alter table 表名 rename column 旧字段名 to 新字段名例子:alter table T_STUDENT rename column NAME to ...