vertical-align和text-align的理解

一. vertical-align

vertical-align的两种常用的用法：

针对inline和inline-block元素，通过在该元素上设置vertical-align，来改变自身的对齐方式。

注意： 一个元素看不出效果，必须设置不同大小的元素才能体现出来，并且以大的元素作为参考；

<!DOCTYPE html>
<html><header><style>.bg span{background-color: lightgreen;}.span2 {font-size: 30px;}.span3 {vertical-align: bottom;}</style></header><body><div class="bg"><span class="span2">发的说法</span><span class="span3">你好</span></div></body>
</html>

设置垂直居中。通过在父元素上设置display: tabel-cell和vertical-align来使子元素垂直居中。

<!DOCTYPE html>
<html><header><style>.bg {background-color: lightblue;border: black solid 1px;height: 300px;display: table-cell;vertical-align: middle;}.bg span{background-color: lightgreen;}.span2 {font-size: 30px;}.span3 {vertical-align: bottom;}</style></header><body><div class="bg"><span class="span2">发的说法</span><span class="span3">你好</span></div></body>
</html>

二. text-align

通过在父元素上设置text-align来使子元素水平居中。

<!DOCTYPE html>
<html><header><style>.bg {background-color: lightblue;border: black solid 1px;height: 300px;width: 1000px;display: table-cell;text-align: center;vertical-align: middle;}.bg span{background-color: lightgreen;}.span2 {font-size: 30px;}.span3 {vertical-align: bottom;}</style></header><body><div class="bg"><span class="span2">发的说法</span><span class="span3">你好</span></div></body>
</html>

vertical-align和text-align的理解相关推荐

处理器startup.s 常见汇编指令,伪指令解释 .globl _start .section .data .text .align
.section .data 汇编程序中以.开头的名称并不是指令的助记符,不会被翻译成机器指令,而是给汇编器一些特殊指示,称为汇编指示(Assembler Directive)或伪操作(Pseudo- ...
testmeshpro合批_TextMesh Pro Emoji Align With Text(表情和文字对齐)
前言 MMO游戏中需要富文件组件,大体功能包括图文混排,表情,超链接,文字动画等富文本功能,且DC数占用少. 本文选择Unity免费提供的TextMesh Pro 解决方案. 软件环境 Unity3D ...
html text align属性,HTML canvas
实例在位置 150 创建一条红线.位置 150 是下面实例中定义的所有文本的锚点.请研究每种 textAlign 属性值的效果: YourbrowserdoesnotsupporttheHTML5c ...
html text align属性,CSS中的text-align属性怎么用
CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码在此处显示文字效果 ...
html5 text align,CSS属性参考 | text-align
CSS text-align 属性指定块级元素中的内联元素(如文字和图片)的对齐方式. CSS text-align属性并不控制块级元素的对齐方式,它控制块级元素里面的内联元素的对齐方式.虽然这个属性 ...
html css text align,css – text-indent不起作用,而text-align：right
看起来保持对齐对于浏览器来说更重要,所以文本的正确边缘保持在右边,无论如何. 该文档设置为ltr方向,因此缩进应用于该行的左侧,但由于您已经表示要将其与右对齐,所以浏览器完全忽略该缩进.我没有解释为什 ...
mysql text oracle_深入理解Oracle Universal Installer (OUI) Text
文档介绍了Oracle Universal Installer (OUI)的一些细节只是,PPT Slideshare版地址在这里:http://www.oracledatabase12g.com/a ...
Echarts漂亮水滴图
ECharts提供了水滴图插件echarts-liquidfill, from @Ovilia 在学习Echarts的时候看到了一款非常漂亮的图形liquidfill,记录了Echarts-liqui ...
Uboot中start.S源码的指令级的详尽解析
Uboot中start.S源码的指令级的详尽解析版本:v1.9 Crifan Li 摘要本文对Uboot中的Start.S的源码的几乎每一行,都进行了详细的解析本文提供多种格式供: 在线阅读 H ...
Uboot中start.S源码的指令级的详尽解析【转】
本文转载自:http://www.crifan.com/files/doc/docbook/uboot_starts_analysis/release/html/uboot_starts_analys ...

vertical-align和text-align的理解

一. vertical-align

vertical-align的两种常用的用法：

二. text-align

vertical-align和text-align的理解相关推荐

最新文章

热门文章