一、文本水平对齐属性---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. Javascript高级编程学习笔记(47)—— 元素遍历

    元素遍历 为了方便我们使用JS来遍历文档中的元素,W3C在原来的基础之上提出了 Element Traversal 规范 这一规范主要就是为了统一浏览器对文档中节点解析不一致的问题. 比如在某些浏览器 ...

  2. 一次非常有趣的 SQL 优化经历

    阅读本文大概需要 6 分钟. 前言 在网上刷到一篇数据库优化的文章,自己也来研究一波. 场景 数据库版本:5.7.25 ,运行在虚拟机中. 课程表 #课程表 create table Course( ...

  3. Day5:html和css

    Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义.然后数值为auto即可. .dashu { width: 100px; margin: ...

  4. 移动端video标签默认置顶的解决方案

    概述 在移动端上面,比如说微信上面打开一个页面,如果有video标签的话,常常会出现video标签默认置顶的情况,一般的解决方案是在不需要看见它的时候给它加一个display:none进行隐藏.今天在 ...

  5. css中的视距perspective和视差效果

    概述 之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果.今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用. 3D翻转 3D翻转效果其实非常简单,其实就是perspec ...

  6. C语言那年踩过的坑--局部变量,静态变量,全局变量在内存中存放的位置

    先看几个概念: 1.bss是英文block started by symbol的简称,通常是指用来存放程序中未初始化的全局变量的一块内存区域,在程序载入时由内核清0.bss段属于静态内存分配.它的初始 ...

  7. java多线程(2)---生命周期、线程通讯

    java生命周期.线程通讯 一.生命周期 有关线程生命周期就要看下面这张图,围绕这张图讲解它的方法的含义,和不同方法间的区别.    1.yield()方法 yield()让当前正在运行的线程回到就绪 ...

  8. Struts2框架(4)---Action类访问servlet

    Action类访问servlet Action类有三种方式servlet: (1)间接的方式访问Servlet API  ---使用ActionContext对象 (2)  实现接口,访问Action ...

  9. Linux编程 24 shell编程(结构化 if [ condition ] 数值比较,字符串比较)

    一.概述 接着上篇讲的结构化命令,最后讲到了test命令的另一种写法 if [ condition ],它的语法格式如下: --格式如下: if [ condition ] then commands ...

  10. 打成Jar包后运行报错 Unable to locate Spring NamespaceHandler for XML schema namespace

    MAVEN项目,在IDEA中运行正常,但是把它打成jar包后再运行就会出现异常:   Exception in thread "main" org.springframework. ...