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

我们想要的其实是这样的

曾经我一度不得不使用定位来实现我想要的位置效果，将父元素设置 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. cf290-2015-2-3总结与反思（dfs判断无向图是否有环）

    bool dfs(int i,int pre) { visit[i]=true; ;j<=v;j++) if(g[i][j]) { if(!visit[j]) return dfs(j,i); ...

  2. Java IO(IO流)-2

    IO流 第一部分 (OutputStreamWriter BufferOutputStream) 转换流 超类为Reader和Writer 是字符流通向字节流的桥梁:可使用指定的字符编码表,将要写入流 ...

  3. ASP.NET没有魔法——ASP.NET MVC 直连路由(特性路由)

    之前对Controller创建的分析中,知道了Controller的创建是有两个步骤组成,分别是Controller的类型查找以及根据类型创建Controller实例. 在查询Controller的类 ...

  4. 【NOIP2015提高组】 Day2 T3 运输计划

    题目描述 L 国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条航道连通了 L 国的所有星球. 小 P 掌管一家物流公司,该公司有很多个运输计划,每个运输计划形如: ...

  5. 使用EF对已存在的数据库进行模块化数据迁移

    注:本文面向的是已经对EF的迁移功能有所了解,知道如何在控制台下进行相关命令输入的读者 问题 最近公司项目架构使用ABP进行整改,顺带想用EF的自动迁移代替了以前的手工脚本. 为什么要替代? 请看下图 ...

  6. spring MVC 环境搭建

    绿色版Spring MVC(单纯的springMVC) 一.导包,为了获取请求数据多添加一个包 二.web.xml配置 <?xml version="1.0" encodin ...

  7. Spring Cloud官方文档中文版-Spring Cloud Config（下）-客户端等

    官方文档地址为:http://cloud.spring.io/spring-cloud-static/Dalston.SR2/#_serving_alternative_formats 文中例子我做了 ...

  8. 一个fork短码的扩展版本

    原本代码: 链接 int skip = !!fork() + 2*(!!fork()); for (uint32_t i=skip;i!=INT_MAX;i+=4) { } 这个是多进程加速循环的代码 ...

  9. python学习笔记（十一）之函数

    牛刀小试: 定义一个无参函数 >>> def myFirstFunc(): ... print("Hello python") ... print("h ...

  10. Ionic3 一些命令

    ionic start --help E:\Projects\ionic>ionic start --help ionic start - Create a new project This c ...