CSS中关于vertical-align垂直对齐

一向以来,我对vertical-align的属性都搞的不是太清楚,今天刚好碰到有朋友问我相关的问题,于是自己潜心研究了一番,发现这玩意还真不是个简单的东西,在此我分享的东西都是抛弃脑残的IE的,如果你用的是脑残的IE,请跳过此篇文章. 一.为什么我设置的vertical-align没用? 相信很多前端开发人员都遇到过这个问题,有的时候自己明明写了vertical-align属性值,但就是没效果,归其原因,是因为vertical-align是个比较奇葩的东西,想要让他起作用,就要投其所好. 我们知…

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

来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度,蓝色为基线(字母x底部所在的水平线) 行内元素: 行内块元素: (左)在流内内容的情况下,内联块元素的基线是正常流中最后一个内容元素的基线(左边的例子).对于这最后一个元素,它的基线是根据它自己的规则找到的. (中)在流内内容但内联块元素有overflow:hidden属性的情况下,基线是内联块元素…

CSS 布局 - 水平 & 垂直对齐

CSS 布局 - 水平 & 垂直对齐一.元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度,并将两边的空外边距平均分配: .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 注意: 如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用. 二.文本居中对齐…

CSS 中的各种居中 (水平、垂直)

导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大家参考. 1.文本居中先上示例中的结构:  <div class="parent"> <span class="child">some text</span> </div> &…

CSS：CSS 布局 - 水平 & 垂直对齐

ylbtech-CSS:CSS 布局 - 水平 & 垂直对齐 1.返回顶部 1. CSS 布局 - 水平 & 垂直对齐水平 & 垂直居中对齐元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度,并将两边的空外边距平均分配: div 元素是居中的实例 .center { margin: auto; width: 50%; border: 3px solid gr…

使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用!!!!!),除了设置display:flex之外,还有另外两个属性需要设置,分别是justify-content和align-items,他们的意思分别是水平居中和垂直居中.HTML+CSS代码如下: body { position: absolute; wid…

【css基础】文本对齐，水平对齐，垂直对齐

先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注意的是如果有padding这类的东西在,千万看清楚两边的padding值是否相同,当你看到文字不在中间的时候,可能就是因为两边的padding值不同,举例说明: <p>我是一段测试文字</p> 如果看过我前面一片做一个简单网页的日志就知道,这个应该放在body标签里面. 放在网页里就…

CSS之垂直对齐

vertical-align: baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部. bottom 把元素的底端与行中最低的元素的顶端对齐 . text-bottom 把元素的底端与父元素字体的底端对齐. length % 使用 "line-height" 属性的百分比值来排列此元…

【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的text-align属性. 属性值:  <div style="text-align: center;"> <span style="background-color: yellow;"&…

POI写docx文件table中的单元格水平、垂直对齐

核心示例代码垂直对齐 XWPFTableCell cell = table.getRow(i).getCell(j); cell.setVerticalAlignment(XWPFTableCell.XWPFVertAlign.CENTER); //垂直居中水平对齐 CTTc cttc = cell.getCTTc(); CTP ctp = cttc.getPList().get(0); CTPPr ctppr = ctp.getPPr(); if (ctppr == null) { ctp…

CSS中vertical-align的默认值baseline的理解

写在前面的话在学校业余学习了一个月的CSS,人生中第一篇博客就献给CSS了,欢迎大家指正文章中不正确的地方,在此感谢.在尝试开始写博客的时候查了好多资料,原本以为写自己熟悉的知识的博客很容易,没想到中间还是遇到很多的不懂的地方,写博客真是个好习惯,可以帮自己总结知识,找出自己的知识盲区,只不过太花时间了.国庆都出去玩了,然而我宅了好多天. veritical-align的作用,对象以及范围作用veritical是垂直的意思,而align是对齐的意思,两个合起来就是在垂直方向进行对齐. 对象v…

浅析CSS中的BFC和IFC

1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性决定,box的类型分为block-level box 和inline-level box(不包括css3的时候).不同类型的box参与不同类型的formatting context布局. Block-level elements are those elements of the source do…

CSS中盒子模型和position（一）

今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自己记忆中的那些是在那里看到的,找起来特别的麻烦,还是老老实实的写博客写下来吧!本着既然打算写成博客就费点时间写点自己觉得有质量的,要不对不起看我博客的人更对不起自己,有些事情还是要告诉自己,不能急得花点时间,就像学这些技术.踏踏实实一点一点积累,还是要舍得花时间. 本人大四即将毕业生一枚,总是觉得有…

vertical-align表单元素垂直对齐

原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前端开发过程中发现,单(复)选框和它们后面的提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大.即使设置了vertical-align:middle,也依然不能完美对齐.如下图所示: 于是上网查看了一些网站,发现这个问题是普遍存在的,如下图(FF3.5): 在很多网站…

深入理解CSS中的margin

1.css margin可以改变容器的尺寸元素尺寸可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo…

css中的baseline

这是css中的一个容易被人忽略的概念,今天在知乎上看到一个问题,这个问题应该是关于baseline,才去补习了一下关于baseline的知识,首先我来还原一下问题: <div style="position:absolute;left:0;top:0;background:black;color:white;font-size:24px;"> <span style="background:red;margin:0;"> <span&g…

CSS中居中的完全指南（中英对照翻译）

翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different…

css中的一些属性解析

1.inline-block 存在问题:inline-block的相互间距,元素之间会有一个左右2px的margin一样产生请看中间的空隙. 为什么会产生这个空隙呢?? 怎么解决呢? 方案1:使子元素在html中无缝排列 <ul> <li>one</li> <li>two</li> <li>three</li> </ul>  <ul>…

CSS中强大的EM

(转)作者:dearjohn ,发布于2012-7-31 http://www.uml.org.cn/html/201207311.asp 使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”.主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从头对“em”学习了一回.稍为有一点理解,今天特意整理了一份博文与大家一起分享,希望对童子们有些许的帮助. 这篇教程将引导大家如何使用“em”来创建一个基本的弹性…

CSS中的三种基本的定位机制

CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 二.定位 1.相对定位被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动.使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置.移动元素会导致它覆盖其他的框. <html>…

CSS深入之label与input对齐!

我想很多人都会碰到label与input 对齐的问题. 这个东西本身不难,但是要做到与IE这个东西兼容确实有点头疼. 参考各大门户网站的前端源码. 得一方法,以记录之: html确实很简单: 帐号输入用户帐号. 密码输入用户密码. CSS如下: label{ display: inline-block; padding: 0 10px; vertical-align: middle; } input{ outline: none; border: 1px solid rgb(216, 216…

深入理解 CSS 中的行高与基线

1.基本概念 1. 基线.底线.顶线.中线注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在.内容区的大小依据font-size的值和字数进行变化. 3. 行距.行高行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行高.一般情况下,也可以认为是相邻文…

html和css中的技巧

1:标签不要忘记带点 2:div是否成对的出现. 3.body 前面不能加点 4.在写css时记住一定要带上class的命名这样就不会出现重复的 5.出现文字的时候下面有下划线或虚线的时候,用padding撑开距离图片距离变框也是用padding 6.当出现有padding时要记住用width减去padding的值 padding是边与边的距离当出现高度是也是要用light减去padding值 padding也可以用到在四边的距离 7.网页最好写成块的形式也就是一对div中写一…

css中常用的标签

最常用的标签 left 左 top 上 right 右 bottom 下 font 字体 size 大小 width 宽度 height 高度 class 类 label 标签 form 表单 group 组 for 为 example 例子 email 邮箱 placeholder 占位符 checkbox 复选框 line 线 button 按钮 submit 提交 default 默认 margin 外边距 padding 内边距 weight 重量 normal 正常 display 显…

css中的段落样式及背景

《转载》深入理解 CSS 中的行高与基线

这篇文章总结的很好,故转载收藏. 1.基本概念 1. 基线.底线.顶线.中线注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在.内容区的大小依据font-size的值和字数进行变化. 3. 行距.行高行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行…

【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距组成. 2.如果在元素上添加背景,则背景是边框, 内边距和内容组成的区域. 3.在css中width和height指的是内容区域的宽度和高度.增加内边距,边框和外边距不会影响内容区域的尺寸,但会增加元素框的总尺寸.即width=element 注意:ie的盒模型中,width指的是内容,内边距,和边…