一、文本水平对齐属性---text-align

  text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的text-align属性。

属性值:

<!-- span和img作为内联元素而整体居中 -->
<div style="text-align: center;">
<span style="background-color: yellow;">test text</span>
<br>
<img src="http://h5ip.cn/oK0T" style="border: solid 1px red;">
</div>
<!-- 子div继承父div的text-align属性值,但子div元素不会相对于父元素对齐 -->
<div style="width: 200px; text-align: center; border: solid 1px blue;">
<div style="width: 100px; height: 60px; border: solid 1px black;">
<span>test</span>
</div>
</div>

二、元素垂直对齐属性---vertical-align

  vertical-align 属性设置行内元素的垂直对齐方式,在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

属性值:

三、最后

慢慢补充吧。

【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align的更多相关文章

  1. CSS之文本溢出隐藏,不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

  2. jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  3. 关于文本设置overflow:hidden后引起的垂直对齐问题

    目前有这样的需求,一行标题中,前面为图标,后面是文字,文字要实现一行省略的效果 首先把文字设为:display: inline-block; 然后设置省略: overflow: hidden; wor ...

  4. vertical-align表单元素垂直对齐

    原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...

  5. inline-block元素垂直对齐

    多个inline-block元素使用vertical-align:middle无法对齐,必须有个height:100%的子元素才行,通常使用伪元素.另一种方法是添加line-height:normal ...

  6. CSS 学习-文本 段落

    段落. 首行缩进 text-indent属性 比如缩进  <p style="text-indent: 2em;">这里是内容....</p> 这里是内容这 ...

  7. 文字和表单(checkbox/radio)元素垂直对齐方法,兼容Firefox和IE。

    这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何 ...

  8. css实现高度或者宽度不固定的div元素垂直左右居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. MVC扩展DataAnnotationsModelMetadataProvider给model属性对应的页面元素添加任意属性和值

    比如,有这样一个类: public class User    {        public string Name { get; set; }    } 当在强类型视图页,显示属性Name对应的i ...

随机推荐

  1. 第四节:详细讲解Java中的类和面向对象思想

    前言 大家好,给大家带来详细讲解Java中的类和面向对象思想的概述,希望你们喜欢 类和面向对象 在Java中怎样理解对象,创建对象和引用:什么是引用,对于基础学习的同学,要深入了解引用.示例:Stri ...

  2. [Postman]拦截器扩展(15)

    什么是拦截器 注意: Interceptor功能仅在我们的Postman Chrome应用程序中受支持,目前在Postman桌面应用程序中不可用.如果您希望我们的桌面应用程序中提供此功能,请在此处告知 ...

  3. Python入门必学,用Python练习画个美队盾牌

    0 环境 Python版本:3.6.6 操作系统:Mac OS Mojave 10.14.2 1 引言 最近我媳妇每天晚上吃饭时候也拿手机看,上厕所也在看. 看着看着还会笑?WTF?你在干嘛呢? 没错 ...

  4. 【sping揭秘】24、Spring框架对JMS的集成(无环境版,以后学MQ的时候再隆重介绍)& 任务调度和线程池

    这个我也不是很了解,那么这个需要好好学习一下了 JMS有2种消息域类型 1. point to point 点对点模式 2.发布订阅模式  publish/subscribe Pub/Sub 模式 传 ...

  5. mybatis框架(3)---SqlMapConfig.xml解析

    SqlMapConfig.xml SqlMapConfig.xml是Mybatis的全局配置参数,关于他的具体用的有专门的MyBatis - API文档,这里面讲的非常清楚,所以我这里就挑几个讲下: ...

  6. Eclipse java文件、包、工程左下角有感叹号原因及处理方法

    先想如图所示: 原因:多是import引用了无用的类,或集合没指定元素的类型 解决方案如下: 1.可逐一到出现感叹号的java文件中去处理 2.在java文件中使用unchecked,如@Suppre ...

  7. for循环中let与var的区别,块级作用域如何产生与迭代中变量i如何记忆上一步的猜想

    我在前一篇讨论let与var区别的博客中,顺带一笔带过了let与var在for循环中的不同表现,虽然解释了是块级作用域的影响,但具体是怎么去影响的呢,我尝试的去理解了下,这篇博客主要从for循环步骤拆 ...

  8. python语法风格

    这里只给出其它文章里不适合出现部分语法风格. python有几种类型的复合语句:if.for.while.def.class.try/except.with/as等.这些复合类型的语句在编写时,要遵循 ...

  9. Java并发(一)—— 使用多线程

    Java的线程机制是抢占式的,所谓的抢占式指的是每一个线程都会被分配一个指定大小的时间片,一旦这个时间片用完,就会通过上下文切换到另一个线程上去. 并发是主要是为了提高单处理器的性能.创建一个线程会有 ...

  10. C#计算字符串长度,汉字算两个字符

    在C#中的字符串类String中,有个Length属性表示字符串的长度,但该字段返回的是字符的个数,如果字符串中含有中文字符的话,一个汉字占用两个字符的长度,此时获取的长度就不够精确,当然也看具体业务 ...