admin 管理员组

文章数量: 1184232


2023年12月19日发(作者：鼠标代码43的问题解决方法)

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign 特性的元素才生效，例如表格元素中的、、等，而 像

、这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

CSS网页布局DIV水平居中的各种方法

一、单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：

（爱摩客）提供的代码片段：

div {

height:25px;

line-height:25px;

overflow:hidden;

}

这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

（爱摩客）提供的代码片段：

"/TR/xhtml1/DTD/">

单行文字实现垂直居中

现在我们要使这段文字垂直居中显示！

不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值 相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把

完全填充的一种方式而已。可以使用类似下面的代码：

（爱摩客）提供的代码片段：

div {

padding:25px;

}

这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

（爱摩客）提供的代码片段：

"/TR/xhtml1/DTD/">

多行文字实现垂直居中 

现在我们要使这段文字垂直居中显示！  
div {  
padding:25px;  
border:1px solid #FF0099;  
background-color:#FFCCFF;  
}

三、多行文本固定高度的居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一 个display属性能够模拟

，所以我们可以使用这个属性来让
模拟
就可以使 用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者 必须设置在子元素上，因此我们要为需要定位的文本再增加一个
元素：

（爱摩客）提供的代码片段：

div#wrap {

height:400px;

display:table;

}

div#content {

vertical-align:middle;

display:table-cell;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

}

（爱摩客）提供的代码片段：

"/TR/xhtml1/DTD/">

多行文字实现垂直居中 

现在我们要使这段文字垂直居中显示！  
div#wrap {  
height:400px;  
display:table;  
}  
div#content {  
vertical-align:middle;  
display:table-cell;  
border:1px solid #FF0099;  
background-color:#FFCCFF;  
width:760px;  
}

这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。

四、在Internet Explorer中的解决方案

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基 础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

（爱摩客）提供的代码片段：

如果我们对subwrap进行了绝对定位，那么content也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对 定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使 content

的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才 能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现 Internet Explorer

6中的垂直居中：

（爱摩客）提供的代码片段：

div#wrap {

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

height:400px;

position:relative;

}

div#subwrap {

position:absolute;

border:1px solid #000;

top:50%;

}

div#content {

border:1px solid #000;

position:relative;

top:-50%;

}

当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

（爱摩客）提供的代码片段：

"/TR/xhtml1/DTD/">

多行文字实现垂直居中 

现在我们要使这段文字垂直居中显示！  
div#wrap {  
border:1px solid #FF0099;  
background-color:#FFCCFF;  
width:760px;  
height:500px;  
position:relative;  
}  
div#subwrap {  
position:absolute;  
border:1px solid #000;  
top:50%;  
}  
div#content {  
border:1px solid #000;  
position:relative;  
top:-50%;  
}

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

（爱摩客）提供的代码片段：

div#wrap {

display:table;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

height:400px;

_position:relative;

overflow:hidden;

}

div#subwrap {

vertical-align:middle;

display:table-cell;

_position:absolute;

_top:50%;

}

div#content {

_position:relative;

_top:-50%;

}

至此，一个完美的居中方案就产生了。

（爱摩客）提供的代码片段：

"/TR/xhtml1/DTD/">

多行文字实现垂直居中 

现在我们要使这段文字垂直居中显示！  
div#wrap {  
border:1px solid #FF0099;  
background-color:#FFCCFF;  
width:760px;  
height:500px;  
position:relative;  
}  
div#subwrap {  
position:absolute;  
border:1px solid #000;  
top:50%;  
}  
div#content {  
border:1px solid #000;  
position:relative;  
top:-50%;  
}

p.s. 垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同


本文标签： 居中 垂直 高度 文字

版权声明：本文标题：html文字垂直居中 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1702930170a436368.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

更多相关文章

复制粘贴之后出现问号怎么办_复制粘贴文字变乱码解决

2024-9-27

在Windows 2000和Windows XP系统中，经常会在执行“复制”、“粘贴”操作时，粘贴到文本文件里的文字都是乱码，这实际是系统设置问题。解决该问题的方法操作如下几

Word表格中文字不居中，怎么办？

2024-10-9

转载自品略图书馆 http:www.pinluearticle20200615000010739836400.html Word表格中文字不居中，怎么办？ 在工作中&#xff

JS 文字转语音 谷歌内核浏览器,实现音频与文字展示时间同步

2024-10-17

功能问题概述 项目中用到了谷歌内核浏览器的文字转语音功能，需要把要朗读的文字展示出来，因此出现了语音还未读完文字已经展示结束的问题（开始使用的setTimeout函数倒计时展示文字，这种方式并不好用，倒计时结束文字收起展示，但是语音还在朗

Word文档中的文字删除和恢复技巧

2024-12-22

年月日发(作者：反函数图像与原函数图像)文档中的文字删除和恢复技巧文档是我们日常工作和学习中常用的工具之一，而在编辑文档的过程中，经常需要对文字进行删除和恢复操作。本文将介绍一些文档中的文字删除和恢复技巧，帮助您更加高效地进行文本编辑。一、

vue跳转页面后不显示文字_【报Bug】vue页面跳转nvue页面出现黑屏闪退严重问题...

2025-1-26

详细问题描述 在苹果X型号机型中，从vue页面跳转nvue页面直接出现黑屏闪退现象，烦请尽快处理 [内容] 在vue页面中，点击页面跳转，navigat

CAD图纸打印文字显示空心怎么办？

2025-1-27

CAD图纸打印文字显示空心怎么办？我们在CAD中输入文字打印出来的文字是空心该怎么办？如何打印出实心文字呢？下面来教你具体的操作方法。 1、首先我们运行CAD制图工具&am

完全免费的OCR文字识别软件

2025-1-31

今天我要分享给大家的是两款完全免费的OCR文字识别软件，而且这两款软件都是本地版无需联网就能使用，而且没有使用次数的限制。 软件准备好了： 链接: 百度网盘 请输入提取码

余世维有效沟通全文字！

2025-1-31

21世纪是一个充满激烈竞争的时代，作为一名成功的职业经理人，不仅要有应对问题和挫折的能力，还要与客户、同事、合作伙伴和供应商建立良好的人际关系。因此，提

python安装库后出现文字提示You should consider upgrading via the ‘d:users**anaconda3python.exe -m pip ins

2025-1-31

You should consider upgrading via the d:users**anaconda3python.exe -m pip install --upgrade pip command. 直接回车&#

wps word表格粘贴文字就分页解决办法

11月前

wps word表格粘贴文字就分页解决办法 文件格式：硕士学位论文修改情况表 - 副本.docx 现象复现 当粘贴文字会出现下面情况解决办法 选中表格，选择表格属性&#xff0

秘塔 AI 新功能实测，文字秒变可视化网页!

9月前

大家好，我是樱木。 大模型的更新以天为单位更新的。DeepSeek 更新后，增强了前端代码的能力，只需输入简单的描述语句，生成的画布&#xff

利用LSB算法隐藏文字信息的MATLAB实现

8月前

LSB算法——隐藏文字信息 LSB（Least Significant Bit）最低有效位，指二进制中最低位数值。详见WiKi：https:en.wikipediawikiLeast_significant_bit 隐写术 隐

illustrator脚本 #012 剪贴板文字 替换当前文字

7月前

把illustrator当前文档里选择的文字对象替换成剪切板里面的文字用剪切板文字替换到当前选择的文字对象把illustrator当前文档里选择的文字对象替换成剪切板里面的文字DOCactiveDocumentSELDOC.

css translateZ和preserve-3d、perspective形成3D重叠文字,且有滚动视差

7月前

形成3D滚动盒子:overflow: scroll;transform-style: preserve-3d;perspective: 10px;3D重叠、滚动视差先将多个相同文字定位,依次设置transform: translateZ(-

Word（WPS文字）长文档快速跳转必须掌握的三个快捷键

7月前

在查看和编辑Word和WPS文字长文档的时候，如何在文档中快速、便捷地跳转？记住这三个快捷键：1、CtrlHome任何地方跳转到页首2、CtrlEnd任何地方跳转到页尾3、C

pdf转换成word后有文字叠加_word字体出现重叠 pdf转换成word

5月前

word中为什么会出现字体重叠？1。当你打开一个word文档时，你会发现一个地方的文本是重叠的。选择这些重叠字体，使它们成为可操作的黑灰色。2。右击弹出右侧下拉框&#

pdf转换成word后有文字叠加_PDF转换成Word后进行处理

5月前

原标题：PDF转换成Word后进行处理从阅读的角度来说，PDF文件是十分受欢迎的，而且打印成纸质稿也不会出现乱码，有时候我会特意将Word转换成PDF&

高效办公新选择：Windows上安装CapsWriter-Offline并实现远程语音转文字

4月前

文章目录前言1. 软件与模型下载2. 本地使用测试3. 异地远程使用3.1 内网穿透工具下载安装3.2 配置公网地址3.3 修改config文件3.4 异地远程访问服务端4. 配置固定公网地址4.1 修改config文件5. 固定tcp公网

摆脱繁琐！Win11让你的桌面图标只显示图形，不带文字！

2月前

桌面图标下不显示文字,只显示电脑桌面图标下面的文字。1. 按 `Win + R` 打开“运行”对话框。2. 输入 `regedit` 并按 Enter 打开注册表编辑器。3. 导航到以下路径：

用Qwen3-ASR，让Adobe Flash Player的内容瞬间变为可编辑的文字

2月前

无需编程：用Qwen3-ASR轻松实现语音内容转文字 Qwen3-ASR-0.6B 是一款开箱即用的本地化语音识别工具，专为非技术人员设计。它不依赖云端服务、无需写代码、不用配置环境，只需点击几下鼠标，就能把会议录音、课堂笔记

发表评论

全部评论 0
暂无评论
CopyRight © 2022 All Rights Reserved.
Powered By Linux大棚 – 不忘初心的技术博客，浮躁时代的安静角落| 豫ICP备2022026798号-10