vertical-align属性的简单理解

最新推荐文章于 2024-07-12 20:13:17 发布

The-third-brother

最新推荐文章于 2024-07-12 20:13:17 发布

阅读量5.3k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_39666151/article/details/104460410

版权

本文介绍了CSS属性vertical-align的用法，通过三个例子详细解析了middle、top和text-top属性的效果，强调了该属性对行内元素垂直对齐的影响，并鼓励读者通过实践来加深理解。

摘要由CSDN通过智能技术生成

个人建议：不论是学css还是其他，遇到属性、方法之类的问题，先看官方文档。如果看不懂，再看别人的博客。

该属性的作用：行内元素垂直方向的对齐，注意区别于块元素垂直方向的对齐

例子1：middle属性

官文关于middle解释如下：
在这里插入图片描述

正常的理解就是：使用该属性的元素被放在其父元素的垂直居中位置。

像这样：
在这里插入图片描述
最终代码如下：

<div style="background: grey;line-height: 100px;">
    <div style="vertical-align: middle;display: inline-block;width: 30px;height: 30px

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

The-third-brother

关注关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【xlwings api语言参考】Range.VerticalAlignment 属性

DataLab的博客

05-24

690

功能：返回或设置一个 Variant 值，它代表指定对象的垂直对齐方式。读/写。语法： rng.VerticalAlignment rng是一个表示 Range 对象的变量。说明：此属性的值可以设置为 XlVAlign 常量之一。名称值说明 xlVAlignBottom -4107 底对齐 xlVAlignCenter -4108 居中 xlVAlignDistributed -4117 分布式 xlVAlignJustify -4130 Justify xlVAli

css vertical-align属性的一些理解与认识(一)

09-25

CSS中的`vertical-align`属性是用于控制元素在行内元素（inline elements）或者行内块元素（inline-block elements）中的垂直对齐方式。这个属性在布局设计中扮演着重要角色，尤其是在处理表格、图像、输入框等元素...

参与评论您还未登录，请先登录后发表或查看评论

vertical-align属性的用法

Aislli的博客

05-25

6501

vertical-align属性 baseline(默认值) :把行内级盒子的基线与父盒的基线对齐,如果没有基线, margin bottom边缘与父盒基线对齐； sub :把行内级盒子的基线降到父盒下标的适当位置； super :把行内级盒子的基线升到父盒上标的适当位置； <percentage> :把行内级盒子提升或者下降段距离 (距离相对于line height计算)，0%意味着同baseline一样； <length> :把行内级盒子提升或者下降一段距离 , 0cm意味着同b

HTML5和css样式：vertical-align属性的应用，鼠标样式设置，溢出文字省略号显示

最新发布

m0_64450406的博客

07-12

421

在CSS中，vertical-align属性用于设置行内元素或行内块元素的垂直对齐方式。它只影响行内元素或行内块元素，对块级元素无效。属性描述baseline默认值，元素的基线与父元素的基线对齐middle使元素的中部与父元素的基线加上父元素字母x的一半对齐top使元素的顶部与其所在行的顶部对齐bottom使元素底部与所在行的底部对齐。

vertical-align属性

2202_75549187的博客

12-09

1977

vertical-align属性

对vertical-align属性的理解

weixin_53700907的博客

09-11

116

案例：对于一些新闻，我们需要使用div嵌套，一个大的div里面三个小的div，然后设置display:inline-block;让三个div水平排布举个简单的例子说明：简单设置三个div，使他们排列到一行现在看着没什么问题，但是，注意，灵异事件！！！当第一个div里内容为空时，竟然这就用到了vertical-align:属性，vertical-align设置当前元素相对于文本或者其他元素垂直方向的对齐方式，默认是baseline（基线对齐）。元素的对齐就取...

css中vertical-align属性的初步了解

yiyueqinghui的博客

01-17

363

vertical-align起作用的情况 vertical-align影响inline元素、inline-block元素以及table-cell元素垂直方向上的布局。 //适用于 inline: <img>,<span>,<strong>,<em>....... inline-block: <input>(IE8+),<b...

深入理解CSS中的vertical-align属性和基线问题

11-21

要了解vertical-align属性，必须懂得基线，怎么理解基线呢？ 1、我们写网页是在一个矩形的显示屏上，经常是一行一行来布局，不可避免的是一行中会有多个内容，那么这行内容是如何上下对齐的呢？答案就是默认让他们的...

css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明

12-10

总结起来，正确理解和使用`vertical-align`属性对于创建整洁、一致的布局至关重要。在处理行内元素对齐时，务必注意元素类型以及与`line-height`、`height`和`display`属性的相互作用，同时考虑浏览器兼容性问题。...

Vertical alignment

BLOG域名:programb.blog.csdn.net

04-15

632

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. ads via Carbon Adobe Creative Cloud for Teams starting at $33.99 per month. ads via Carbon Change t...

Bootstrap系列之纵向对齐（Vertical alignment）

老__L的博客

06-03

1754

纵向对齐（Vertical alignment）

元素的vertical-align属性

allenmu1982的博客

07-31

171

一，vertical-algin元素的属性值：二，vertical-align只对以下元素起作用： 1，inline 2,inline-block 3,inline-table 基本的inline元素都是标签裹着文字。 inline-block元素：是在行内中的块级元素。他们可以有宽度和高度(通常情况下，这取决于他们的内容)。同样也有padding，margin，...

WPF GridSplitter最好设置HorizontalAlignment和VerticalAlignment，否则不可以左右移动

dxm809的博客

07-05

2057

<Window x:Class="XamlTest.Window5" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window5" Heig...

UILabel+VerticalAlignment.h

Keen_Team的博客

09-20

303

// vertical alignment values typedef enum UITextVerticalAlignment { UITextVerticalAlignmentTop, UITextVerticalAlignmentMiddle, UITextVerticalAlignmentBottom } UITextVerticalAlignment;...

vertical-align:middle/top/bottom/baseline，文本框无法贴顶，表单和按钮对齐，表单和图片对齐

hangshao_123的博客

11-11

526

1. 有哪些参数 top middle baseline bottom 2. 作用能够实现表单和表单的对齐 #text { height: 30px; vertical-align: bottom; } #pwd { height: 40px; }

对齐方式vertical-align、text-align、align-items、justity-content区别

weixin_43452467的博客

07-21

4426

（1）text-align 实现水平居中，比如我们要实现块状元素(block)内，子元素的水平居中;比如我们要实现div2元素在父元素div1内的居中; <style> .div1{ text-align:center } .div2{ display:inline-block } </style> <div class="div1"> <div class="div2"></div> .

垂直随意对齐文本

FISH 的专栏

08-12

1046

UILabelz子类 – 垂直随意对齐文本 2010-03-01 14:22:25| 分类： iPhone develop |字号订阅有人问到怎样正确地对齐UILabel的文字。他们需要UILabel容纳多行文本，但也需要调整文本，他们遇到

{带图片详解}vertical-align: middle,元素垂直居中

ku_tu的博客

11-05

3723

{带图片详解}vertical-align: middle,元素垂直居中,vertical-align介绍

CSS垂直对齐vertical-align属性详解

今天，我们来讨论 CSS 中的 vertical-align 属性，这个属性的理解和认识是非常重要的。本文将从 vertical-align 属性的基本概念、属性值、使用场景等方面进行详细的介绍。一、vertical-align 属性的基本概念 ...