【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align
一、文本水平对齐属性---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的更多相关文章
- CSS之文本溢出隐藏,不定宽高元素垂直水平居中、禁止页面文本复制
1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- 关于文本设置overflow:hidden后引起的垂直对齐问题
目前有这样的需求,一行标题中,前面为图标,后面是文字,文字要实现一行省略的效果 首先把文字设为:display: inline-block; 然后设置省略: overflow: hidden; wor ...
- vertical-align表单元素垂直对齐
原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...
- inline-block元素垂直对齐
多个inline-block元素使用vertical-align:middle无法对齐,必须有个height:100%的子元素才行,通常使用伪元素.另一种方法是添加line-height:normal ...
- CSS 学习-文本 段落
段落. 首行缩进 text-indent属性 比如缩进 <p style="text-indent: 2em;">这里是内容....</p> 这里是内容这 ...
- 文字和表单(checkbox/radio)元素垂直对齐方法,兼容Firefox和IE。
这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何 ...
- css实现高度或者宽度不固定的div元素垂直左右居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- MVC扩展DataAnnotationsModelMetadataProvider给model属性对应的页面元素添加任意属性和值
比如,有这样一个类: public class User { public string Name { get; set; } } 当在强类型视图页,显示属性Name对应的i ...
随机推荐
- python写的压缩软件
import tkinterimport tkinter.filedialogimport osimport zipfileimport tkinter.messagebox #创建住窗口root = ...
- rabbitmq系统学习(三)集群架构
RabbitMQ集群架构模式 主备模式 实现RabbitMQ的高可用集群,一般在并发和数据量不高的情况下,这种模型非常的好用且简单.主备模式也称为Warren模式 HaProxy配置 listen r ...
- Redis之分布式锁
目录 一.加锁原因 二.原子操作 三.分布式锁 四.分布式锁常见问题 一.加锁原因 在一些比较高并发的业务场景,经常听到通过加锁的方法实现线程安全. 下面简单介绍一下 1.1 加锁方式 数据库锁 数据 ...
- java中最常见的几种运行时异常,你get了吗?
NullPointerException (空指针异常) ClassCastException (类型强制转换异常) NumberFormatException (数字格式异常) NegativeAr ...
- 简介 - MongoDB
1- NoSQL简介 NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL": NoSQL是指非关系型的数据库,有时也称作Not Only SQL的缩写, ...
- Linux 网络工具详解之 ip tuntap 和 tunctl 创建 tap/tun 设备
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 在前面一篇文章 ...
- RIPng配置(第十三组)
拓扑如下 配置rip指令和ipv6包允许路由指令以r1为例 在r1上配置拓扑上对应网段的ip,r1上两个连接路由器的端口手动设置ip,同网段的路由器端口ip自动获取. r2配置 r3 配置完后查看路由 ...
- Java核心技术及面试指南 JDBC部分的面试题总结以及答案
5.5.1 你最近的项目里用到的是哪个数据?或你用过哪些数据库?或你对哪个数据库最熟悉? 通过这个问题,我们将会确认候选人是否在项目里用过数据库或JDBC. 5.5.2 你有没有建过表?或修改表里的字 ...
- MySql 踩坑小记
MySql 踩坑一时爽,一直踩啊一直爽... 以下记录刚踩的三个坑,emmm... 首先是远程机子上创建表错误(踩第一个坑),于是将本地机器 MySql 版本回退至和远程一致(踩第二个坑),最后在 ...
- tp3.2多个或者并且语句语法
$map['tid1&cid1'] =array($jmid,'0','_multi'=>true); $map['tid2&cid2'] =array($jmid,'0','_ ...