css vertical-align属性详解

适用场景

vertical-align属性设置元素的对齐方式，只有具备以下两种属性的元素设置vertical-align后才起作用：

1. display:inline
2. display:inline-block

属性介绍

HTML：

<p>xxxxxxxxxxxxx<span>Lorem ipsum dolor</span></p>

CSS：

        p{height: 100px;width: 300px;border: thin solid;line-height: 50px;background-color: #dbdbdb;}span{color: #ff2118;}

1. 为span添加属性： `vertical-align:base-line`

以父元素的基线位置对齐，即span元素底部与父元素中英文小写x的下沿。

2. 为span添加属性： `vertical-align:bottom|top`

span 未设置line-height时其vertical-align:bottom|top和父元素内容中心对齐，当span设置line-height时，vertical-align:bottom其以父元素的line-height为标准，显示在line-height范围内的最右上，而父元素显示在line-height范围内的最左下：

span{color: #ff2118;vertical-align:bottom;line-height:100px;}

而span设置line-height时，vertical-align:top中span元素内容位置不变，只是父元素显示在左上而已：

3. 为span添加属性： `vertical-align:text-bottom`

则以自身内容的最底部对齐与父元素内容的最顶部

3.为span添加属性： `vertical-align:text-top`

css vertical-align属性详解相关推荐

(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
css动画相关属性详解
css动画相关属性详解文章目录 css动画相关属性详解什么是CSS动画? 一.@keyframes规则二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
CSS中float属性详解
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...
CSS中margin属性详解
margin属性概述 margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性. 该接受任何长度单位,可以是像素.英寸.毫米或 em. 相关属性 margin 可以单独改变元素的上 ...
css 的 hover属性详解
css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素.同级元素.相邻元素的样式 .hover 属性可以应用于任何元素,不仅仅是链接 .使用 hover ...
css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性发布时间:2020-09-23 14:26:58 来源:亿速云阅读:83 作者:小新这篇文章主要介绍css中如何使用counter-reset属性, ...
html css 文本字体属性详解
文本.字体属性文本属性 color 为字体颜色 font-style 用于打开和关闭斜体文本 font-weight 为字体设置粗细程度 font-size 为文字指定大小 font-family ...
前端CSS input type属性详解
input在前端中使我们需要熟悉使用的一个标签,input中type属性值不止text一个. 1.首先是最常用的 text <input type="text" placeh ...

css vertical-align属性详解

适用场景

属性介绍

1. 为span添加属性： `vertical-align:base-line`

2. 为span添加属性： `vertical-align:bottom|top`

3. 为span添加属性： `vertical-align:text-bottom`

3.为span添加属性： `vertical-align:text-top`

css vertical-align属性详解相关推荐

最新文章

热门文章

css vertical-align属性详解

适用场景

属性介绍

1. 为span添加属性： vertical-align:base-line

2. 为span添加属性： vertical-align:bottom|top

3. 为span添加属性： vertical-align:text-bottom

3.为span添加属性： vertical-align:text-top

css vertical-align属性详解相关推荐

最新文章

热门文章

1. 为span添加属性： `vertical-align:base-line`

2. 为span添加属性： `vertical-align:bottom|top`

3. 为span添加属性： `vertical-align:text-bottom`

3.为span添加属性： `vertical-align:text-top`