开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在环绕浮动元素的视区中垂直居中文本

在环绕浮动元素的视区中垂直居中文本，可以通过以下步骤实现：

创建一个包含浮动元素和文本的父容器，并设置其为相对定位（position: relative）。
在父容器中创建一个子容器，并设置其为绝对定位（position: absolute）。
将子容器的左右边距设置为自动（margin-left: auto; margin-right: auto;）。
将子容器的上下边距设置为相等的值，以实现垂直居中（margin-top: 50%; margin-bottom: 50%;）。
在子容器中添加文本，并设置其为相对定位（position: relative）。
将文本的上下边距设置为负文本高度的一半，以使其垂直居中（top: -50%;）。

这样，文本就会在环绕浮动元素的视区中垂直居中。

以下是腾讯云相关产品和产品介绍链接地址，供参考：

腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版（TencentDB for MySQL）：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：提供安全可靠、低成本、高扩展的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：提供丰富的人工智能服务和解决方案，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：提供全面的物联网解决方案，包括设备接入、数据采集、数据存储与分析等。详情请参考：https://cloud.tencent.com/product/iot
腾讯云移动开发（Mobile）：提供移动应用开发和运营的一站式解决方案，包括移动后端云服务、移动推送、移动分析等。详情请参考：https://cloud.tencent.com/product/mobile

相关搜索:在IE11中不垂直居中的文本(特殊unicode，如⇑)如何在QTextBrowser中垂直居中图片旁边的文本？如何在Firefox中使svg元素中的文本居中？如何在<a>元素中垂直对齐显示为块的文本如何在LaTex表格环境中使表格单元格中的文本垂直居中？如何在div中的绝对定位元素中居中可变长度的文本？如何在Xcode ios应用程序中获取被点击元素的详细信息，如文本值或按钮名称或id sevlet 使用遇到问题三级菜单导航

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

css布局 - 两栏自适应布局的几种实现方法汇总

这种两列布局的样式是我们在平时工作中非常常见的设计，同时也是面试中要求实现的高频题。很有必要掌握以备不时之需：

02

css布局 - 工作中常见的两栏布局案例及分析

突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法。临时就在我经常浏览的网站上抓的相对应的截图。（以后看到其他类型的我再补充）

01

前端硬核面试专题之 CSS 55 问

CSS 盒子模型具有内容 (content)、填充 (padding)、边框 (border)、边界 (margin)这些属性。

02

CSS3新特性应用之结构与布局

一、自适应内部元素利用width的新特性min-content实现 width新特性值介绍： fill-available，自动填充盒子模型中剩余的宽度，包含margin、padding、border尺寸，他让非block元素也可实现宽度100%; max-content：假设容器有足够的宽度，足够的空间，此时，所占据的宽度就是max-content，与display为inline不一样，max-content就像white-space：nowrap一样，不会换行的。 min-content：采用内部

09

CSS技巧和经验

1. 如何清除图片下方出现几像素的空白间隙方法1 img { display: block; } 方法2 img { vertical-align: top; } // 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以方法3 // #test为img的父元素 #test { fo

07

如何提升你的CSS技能，掌握这20个css技巧即可[完整版]

随着前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写，在布局中标准化样式流程，不仅可以帮助你高效地创建自己的框架，而且可以解决许多常见的问题。

02

20个 CSS 快速提升技巧

css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。

02

建议收藏！总结了 42 种前端常用布局方案

对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。

03

建议收藏！总结了42种前端常用布局方案

对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。

03

HTML & CSS页面布局之定位

默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。

01

【移动端网页布局】流式布局案例 ② ( 实现顶部固定定位提示栏 | 布局元素百分比设置 | 列表样式设置 | 默认样式设置 )

京东手机端 https://m.jd.com/ 顶部提示使用京东 APP 打开网页的提示 , 是通过固定定位放置在顶部的 ,

01

CSS水平和垂直居中技巧大梳理

auto只有在块级元素设置了宽度width才有效(块级元素不设宽度默认就占整行了，所以是废话)

03

CSS3

值： (1)、normal(正常)；bold(加粗)；（<==常用） (2)、纯数字：100~900的整百数；

09

【云+社区年度征文】2020一网打尽CSS世界

一个水平流上只能单独显示一个元素，因此理论上都可以配合clear属性来清除浮动带来的影响。

01

17个场景，带你入门CSS布局

CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。

02

【CSS】课程网站头部制作 ⑤ ( 用户栏测量 | 用户栏代码编写 | 代码示例 )

用户与左侧搜索栏 , 间隔 30 像素 , 这里设置用户栏左外边距 30 像素 ;

03

前端面试之HTML && CSS

带!important 标记的样式属性优先级最高；样式表的来源相同时： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

01

【CSS3】 float浮动与position定位常见问题（个人笔记）

[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）

04

CSS&HTML面经专题——（三）CSS定位/盒模型/经典布局/浮动布局与BFC

position：static | relative | absolute | fixed | center | page | sticky

03

剖析一些经典的CSS布局问题，为前端开发+面试保驾护航

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

02

前端面试题归类-css

网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！

04

【CSS3】CSS3 2D 转换 - scale 缩放 ③ ( 使用 scale 设置制作可缩放的按钮案例 )

当鼠标移动到按钮上之后 , 鼠标变为小手样式 , 并且按钮以中心位置为准 , 放大到原来的 2 倍 ;

01

Unity3D关于Text方面的类

TextAlignment 多行文本应该如何被对齐这个是被GUIText.alignment属性使用参见：GUI Text component 值 Left 文本行左对齐 Center 文本行居中对齐 Right 文本行右对齐 TextAnchor 文本的锚点被放置在什么位置这个是被GUIText.anchor属性使用参见：GUI Text component 值 UpperLeft 文本被锚点在左上角 UpperCenter 文本被锚点在上边，垂直居中 UpperRight 文本被锚点在右上角 MiddleLeft 文本被锚点在左边，垂直居中 MiddleCenter 文本在水平和垂直方向上居中 MiddleRight 文本被锚点在右边，垂直居中 LowerLeft 文本被锚点在左下角 LowerCenter 文本被锚点在下边，垂直居中 LowerRight 文本被锚点在右上角 TextClipping GUI系统处理过大文本的以适合所分配矩形的方式值 OverDow 文本随意浮动在该元素之外 Clip 文本被裁剪以便放置在该元素之内

02

【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )

盒子模型居中显示 : 此处涉及到了顶部的 Banner 图片 , 和下方的导航栏需要居中显示 , 设置 margin: auto; 和 margin: 0 auto; 都可以实现该效果 ;

02

居中详解

讲解 1，单行文本的居中：

单行文本框居中

.center{width:300px;height:300px;line-height:300px;} 2, 多行文本的居中： 1）

多行文本框居中。。。。。。。

.c1{width:300px;height:3

09

学习纲要：CSS 布局

学习条件掌握了 CSS 的选择器、属性和值。学习目标了解 display 属性的可选值有哪些，分别代表什么意思。知道行内元素和块级元素的区别。会使用 Flex，inline-block 进行常用页面的布局。了解用 Float 来布局。知道如何清除浮动。知道相对定位（position：relative），绝对定位和固定定位的区别，以及什么时用。知道 z-index 的用途。知道如何让文字水平居中。知道如何让单行和多行文字垂直居中。学习资源学习 CSS 布局 Flex 布局 Flex 布

01

【CSS】课程网站网格商品展示模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

文本所在盒子 , 与顶部的导航栏有 15 像素间隔 , 这里使用上外边距设置 ;

04

css布局 - 垂直居中布局的一百种实现方式（更新中...）

1. line-height行高简单粗暴实现法：line-height：Npx（N = 与元素高度相同的值）

01

CSS实用技巧（中）

我们经常使用CSS，但是却不怎么了解CSS，本文主要对vertical-align、BFC、position中开发过程不怎么注意的特性进行简要总结，从本文中，你将了解到以下内容：

04

前端面试CSS「建议收藏」

代表内联样式，如style=”xxx”，权值为 1000；代表 ID 选择器，如#content，权值为 100；代表类、伪类和属性选择器，如.content、:hover、[attribute]，权值为 10；代表元素选择器和伪元素选择器，如div、p，权值为 1。

02

把所有的东西都对齐吧 - 谈谈垂直居中的解决方案

本文主要介绍了垂直居中显示的常见解决方案，包括使用Flexbox、基于视口的布局以及基于表格布局的方法。这些方法都可以在不同程度上实现垂直居中显示，并且具有较好的兼容性和扩展性。同时，作者还介绍了一些细节和注意事项，以帮助读者更好地理解和应用这些方法。

06

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

本文介绍了前端性能优化中的垂直居中方案，包括使用Flexbox、Grid、CSS3进行垂直居中，以及使用定位和Transform进行垂直居中。同时，还介绍了如何通过代码拆分、懒加载和图片自适应来提高页面性能。最后，给出了一组示例和代码。

08

前端常用布局方案总结

若元素为行内块级元素，可以通过为其父元素设置text-align: center 实现水平居中。

03

Css 垂直居中

在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align:center; 如果它是一个块级元素，就对它自身应用 margin:auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。

01

前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

目录控制标签元素样式长宽属性、字体属性、文本对齐、文本装饰、首行缩进背景属性、边框属性、圆角 display 显示方式盒子模型 margin、padding... float浮动 overflow 清除溢出（超出div大小的部分） position 定位对文档流的影响 z-index 层级 opacity 标签整体透明度去掉li 前面的标识文本垂直居中单行文本居中作业案例关于自适应（不需要了解）控制标签元素样式小心得：样式有继承(遗传)效果（子元素将继承父元素的样式，如果子元素

02

面试必备 css面试必考点

CSS 并不是面试重点考察的领域，但如果能在 CSS 领域有自己的见解和经验，会使自己更加脱颖而出。

01

【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

该盒子是处于版心位置 , 先为其设置版心的样式 , 版心宽度 1200 像素 , 水平居中 , 先将版心的样式设置给盒子 ;

03

CSS高级技巧讲解

display -- block;(转换为块元素&& 显示) none(隐藏 && 不保留原来的位置) -- 重要！

03

【网页前端】CSS常用布局之定位

注意：除非我们需要将元素由其他定位模式强制改回标准流，否则一般情况下不用。

04

解决CSS垂直居中的几种方法（基于绝对定位，基于视口单位，Flexbox方法）

在CSS中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center ;如果它是一个块级元素，就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。　　多年以来，垂直居中已经成为了CSS领域的圣杯，它同样也是前端开发圈内广为流传的笑话。原因在于它同时具备以下几条特征： 1）它是极其常见的需求。 2）从理论上来看，它似乎极其简单。

07

CSS中各种布局的背后(*FC)

CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。盒模型(Box Model) 上图为W3C标准盒模型，另外还有

05

一篇文章带你了解CSS对齐方式

当使用 position对齐元素时, 总是定义 margin 和 padding 为 <body> 元素. 这是为了避免不同浏览器的视觉差异。

01

CSS十问之元素居中

大家好，我是柒八九。从今天起，我们又重新开辟了一个新的领域：CSS串讲。(毕竟在Web 领域，CSS也是有举足轻重的作用)在该系列文章中，我们会一起学习「元素居中」、「层叠上下文」还有一些在面试中比较常见的问题及一些在工作中遇到比较好玩的点。

01

前端学习笔记—CSS

文本垂直操作：vertical-align的使用图示。middle设置居中。 vertical-align 只对行内元素、行内块元素和表格单元格（table-cell）元素生效：不能用它垂直对齐块级元素。

01

CSS 基础系列：从清除浮动和margin塌陷问题谈BFC

浮动的元素会影响其兄弟元素的位置，并可能导致父元素的高度塌陷（假如父元素没设置高度），因此需要清除浮动（带来的影响）。

01

css笔记 - 张鑫旭css课程笔记之 line-height 篇

围绕文字看不见的盒子，其大小跟字体大小有关。范围大概就是选中单行文本后，你选中的区域了。

02

CSS中关于元素居中的方法总结（超全）

css中一个很重要的问题，就是关于元素的居中，包括水平居中，垂直居中，本文就是为大家总结了：css中对于行内元素与块级元素不同的居中方法.

02

前端基础篇之CSS世界

我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证，所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具，国内镜像站点，方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新，希望到最后能够文如标题展现出真正的css世界。

05

CSS入门？一篇就够了！

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

02

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓以及防止表单域拖拽等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭