【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 ...
随机推荐
- Rpc框架dubbo-client(v2.6.3) 源码阅读(二)
接上一篇 dubbo-server 之后,再来看一下 dubbo-client 是如何工作的. dubbo提供者服务示例, 其结构是这样的!dubbo://192.168.11.6:20880/com ...
- ubuntu16.04 uninstall cuda 9.0 completely and install 8.0 instead
卸载cuda 9.0sudo apt-get --purge remove cudasudo apt autoremoveto remove cuda 9.0 Thensudo apt-get cle ...
- [Objective-C语言教程]关系运算符(8)
运算符是一个符号,告诉编译器执行特定的数学或逻辑操作. Objective-C语言内置很多运算符,提供如下类型的运算符 - 算术运算符 关系运算符 逻辑运算符 按位运算符 分配运算符 其它运算符 本教 ...
- C# 配置文件Xml读写
分析xxx.exe.config文件: <?xml version="1.0" encoding="utf-8"?> <configurati ...
- Oracle nal() 和count(*)的注意点
select count(*) into fhave from tab_ppxuser where name = userstr;和select nvl(hphotourl, '0') into ph ...
- MySQL(2)---Explain
Explain 什么是explain 使用explain关键字,可以模拟优化器执行SQL语句查询,从而知道MySQL如果处理你的SQL语句,分析语句的性能瓶颈. explain 分析sql语句 使用e ...
- 课程回顾-Convolutional Neural Networks
为什么卷积层计算量更低paddingStrided convolution多维卷积LeNet 参数卷积网络的好处参数共享稀疏连接经典网络实现LeNet-5AlexNetVGGResNet残差块iden ...
- Android Studio下HierarchyViewer的使用
什么是HierarchyViewer Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下,名为hierarchyviewer.bat.它是Android自带的 ...
- Node.js 获取微信JS-SDK CONFIG
背景 前端在调用微信提供的分享.拍照.扫一扫等功能时需要到后台获取配置,主要是签名(signature).Node 开发可以用朴灵大佬的SDK--co-wechat-api. 配置 到微信公众平台进入 ...
- XML概念定义以及如何定义xml文件编写约束条件java解析xml DTD XML Schema JAXP java xml解析 dom4j 解析 xpath dom sax
本文主要涉及:xml概念描述,xml的约束文件,dtd,xsd文件的定义使用,如何在xml中引用xsd文件,如何使用java解析xml,解析xml方式dom sax,dom4j解析xml文件 XML来 ...