css在高度为百分比时候的文字垂直居中方法

2023-11-13

 
 
对于高度单位是px的div,想让文字垂直居中很简单,line-height=height就可以了,但是对于高度为百分比的div,如何让文字垂直居中呢? 方法一:给需要垂直居中的文字增加一个父元素,给父元素设置 display:table;
给需要居中的子元素设置 vertical-align:middle; display:table-cell;
方法二:给需要居中的元素加以下代码样式 display:flex; justify-content:center; align-items:center;
两种方法在不同场景都有一定程度的问题,需根据实际情况确定。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css在高度为百分比时候的文字垂直居中方法 的相关文章

  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘
  • 使用绝对定位时文本被破坏

    我有一个小挑战 我在 Stack Overflow 上没有找到任何解决方案 这就是我得到的 这就是我想要的 为了产生这个标题效果 我使用绝对位置 我什至不知道我的标题的宽度和高度 因此 使用此解决方案时 大文本会中断 My HTML div
  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您
  • CSS 网格框架中的间距有什么作用?

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种
  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code
  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi
  • Quill 公开可用的 CSS

    我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件 而该组件又基于 免费开源 WYSIWYG 编辑器 Quill 为此 我需要获取 TextEditor 组件生成的 HTML 将其包含在
  • 将图像编码为base64有什么效果?

    如果我将图像 jpg 或 png 转换为 base64 那么它会更大 还是具有相同的大小 会大多少呢 是否建议在我的网站上使用 Base64 编码的图像 大约会大 37 非常粗略地说 Base64 编码的二进制数据的最终大小等于原始数据大小
  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her
  • Bootstrap 5 是否删除了行之间的间距?

    我开始使用 bootstrap 5 并注意到行之间没有空格 我们是否必须明确使用spacing https getbootstrap com docs 5 0 utilities spacing 实用程序喜欢mb 3 or mb 2等等试图
  • CSS使背景图像使用字体字符

    我想使用字体字符 例如来自 font awesome 作为输入元素的背景图像
  • 在其他不可滚动的 div 上滚动时如何滚动可滚动的 div?

    我知道这个问题听起来很令人困惑 但这就是我想要做的 在下面的代码片段中 如果用户在绿色 div 上滚动 我希望黄色 div 相应地滚动 就像滚动黄色 div 一样 请注意 黄色 div 有overflow auto 但绿色的则不然 docu
  • 如何在日期选择器中设置不在当前月份的单元格的样式

    我目前正在为我的 JavaFX 应用程序制作注册表 问题是 当日期选择器中的单元格不在页面的月份上时 我想让该单元格变灰 让我们看看我当前的日期选择器 我的日期选择器 正如您所看到的 我希望下个月的日期 27 日 28 日 30 日以及 1
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 如何覆盖 bootstrap 表 td 样式?

    我正在使用 Bootstrap 3 3我有一个 HTML 代码如下 div table class table table striped tr td 03 td td 04 td td 05 td td 06 td td 07 td td
  • 宽度:适合内容;在 Chrome 上工作,但在资源管理器上不工作

    我构建了一个应用程序 所有内容都在 Chrome 中完美显示 但如果我在 Windows 资源管理器中打开该应用程序 容器会比应有的小 我在用着width fit content 这是只适用于 Chrome 的东西吗 我怎样才能使其适用于所
  • 将输入中每个单词的第一个字符设为大写

    我想知道如何在输入区域自动生成单词的第一个字符 目前我的代码是 Name
  • 使用 CSS 覆盖透明 div 中的不透明文本

    我试图使透明 div 内的文本没有不透明度 也就是全黑 div style background 3cc p style background 000 This text should be all black p div 只用 CSS 就
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码

随机推荐

  • vue封装axios实现

    axios很多前端都应该是非常熟悉了 前端访问后端很多都是使用的它 今天我们使用vue来封装一个axios 首页我们新建一个request js文件并引入axios的依赖 import axios from axios 接着创建axios的
  • 熵的概念理解

    Author 修远 说明 本文为Datawhale下开源项目 李宏毅机器学习 决策树的补充内容 作者水平有限 还望学习者批评指正 Datawhale 学习目标 学习信息量计算 原理 学习信息熵 证明 0 H p
  • Pandas数据处理3:数据合并(join、merge),累计与分组(groupby)

    Pandas数据合并 join merge 累计与分组 groupby import pandas as pd import numpy as np def make df cols ind 一个简单的DataFrame data c st
  • 多维时序

    多维时序 MATLAB实现SCNGO CNN Attention多变量时间序列预测 目录 多维时序 MATLAB实现SCNGO CNN Attention多变量时间序列预测 预测效果 基本介绍 程序设计 参考资料 预测效果 基本介绍 1 S
  • Pretues和Keil使用stm32F103C6芯片实现跑马灯

    一 Protues创建工程 添加好名称 不断下一步就行 二 pretues添加原件 构建电路图 二 keil做代码 添加文件这里不做说明 注意一下几个点 1 芯片使用stm32F103c6 2 mdk的汇编文件随之改变 3 宏定义改成stm
  • 【NLP】使用 LSTM 和Beam Search进行文本自动完成

    大家好 我是Sonhhxg 柒 希望你看完之后 能对你有所帮助 不足请指正 共同学习交流 个人主页 Sonhhxg 柒的博客 CSDN博客 欢迎各位 点赞 收藏 留言 系列专栏 机器学习 ML 自然语言处理 NLP 深度学习 DL fore
  • 获取腾讯视频的视频url

    爬视频喽 1 获取链接地址 如下图 类似 https v qq com x page q0900ebm4qz html 2 取值 取上图获取到的加粗的数据 然后替换下面链接中的加粗数据http vv video qq com getinfo
  • 记一次python3 pip 报错Retrying

    错误信息如下 Retrying Retry total 4 connect None read None redirect None status None after connection broken by SSLError Can t
  • Nginx超详细入门教程

    目录 一 nginx配置文件介绍 二 nginx的核心功能 1 反向代理 lt 1 gt 正向代理 lt 2 gt 反向代理 lt 3 gt 准备工作 2 负载均衡 3 负载均衡策略 4 动静分离 三 Nginx的高可用性 1 准备两台虚拟
  • Qt控件使用方法技巧合集

    Qt控件使用方法技巧合集 本篇博客代码示例包含C 版本和Python版本 不管是哪个版本 Qt的API都是一样的 使用方式大同小异 文章目录 Qt控件使用方法技巧合集 1 QTextEdit设置背景色和文本颜色 2 QMessageBox的
  • GBK转成utf-8,java实现及讲解,androidstudio学习

    好吧 看来问的人和回答的人都不一定清楚什么是 编码和编码格式 以及如何理解 java中字符串的编码 首先明确几点 unicode是一种 编码 所谓编码就是一个编号 数字 到字符的一种映射关系 就仅仅是一种一对一的映射而已 可以理解成一个很大
  • 连接SqlServer数据库报错version TLS10 is not accepted by client preferences [TLS12,TLS13]

    报错内容 我的报错信息如下 其他类似的可能也好使 你们可以试试 The server selected protocol version TLS10 is not accepted by client preferences TLS12 T
  • 程序员进阶攻略-笔记-021~030

    信息 过载与有效 忙碌 充实而疲倦 的虚幻假象 在这个信息过载的洪流中 需要的就是在这股洪流中筛选信息并建立自己中流砥柱般的 知识磐石 心智 这两个字合在一起是一个意思 分开为 心 和 智 两个字又可以分别解释为 心 是你对需要的选择 从心
  • 八款国产操作系统

    点击上方蓝字 快速关注 目前世界上存在的那些操作系统 Windows MAC OS X MVX DOS VSE UNIX Linux等 很少见到国产操作系统的影子 你知道国产操作系统有那些吗 虽然国内的操作系统我们可能用不上 但我们有足够的
  • sd卡详细资料

    1 简介 SD卡是基于flash的存储卡 SD卡和MMC卡的区别在于初始化过程不同 SD卡的通信协议包括SD总线和SPI两类 SD卡使用卡内智能控制模块进行FLASH操作控制 包括协议 安全算法 数据存取 ECC算法 缺陷处理和分析 电源管
  • Nginx hls流媒体服务器实现直播

    通过Nginx模块nginx rtmp module实现hls流媒体服务器并用OBS进行推流 一 直播协议简介 首先 在搭建服务之前先了解下目前主流的几个直播协议 1 RTMP 实时消息传输协议 Real Time Messaging Pr
  • ERROR:root:Internal Python error in the inspect module.

    Google Colab运行终端命令报错 python xxxxx ERROR root Internal Python error in the inspect module Below is the traceback from thi
  • 维修汽车服务器,修车别被坑,老司机2分钟告诉你,修理厂和4S店之间不为人知的秘密!...

    在修车行业的新闻太多了 也有报道过一辆车坏了一颗螺丝修了几千上万块的新闻并不少见 对于修车多数人的第一反应就是 修车行业太坑了 尤其是私人修理厂 品牌修理店和4S店还稍微好点 但是事实真的是这样吗 首先让我们先了解一下现在的修理行业 现在开
  • 空间战场态势感知系统

    兵工科技 杂志就数字冰雹的 空间战场态势感知指挥可视化系统 对市场总监丁冬先生进行了专访报道 现代战争强调C4ISR技术 指挥中心在千里万里之外 要通过信息化技术对整个海 陆 空 天 电磁战场进行全面的了解 掌握和指挥控制 那么传统指挥部里
  • css在高度为百分比时候的文字垂直居中方法

    对于高度单位是px的div 想让文字垂直居中很简单 line height height就可以了 但是对于高度为百分比的div 如何让文字垂直居中呢 方法一 给需要垂直居中的文字增加一个父元素 给父元素设置 display table 给需