admin 管理员组

文章数量: 1087139


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， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

更多相关文章

div 内容水平居中

12月前

年月日发(作者：是远距离)内容水平居中内容水平居中。在网页设计中，是一个非常重要的标签，它可以用来创建各种不同的布局和样式。其中，水平居中是一个常见的需求，今天我们就来讨论一下如何实现内容的水平居中。首先，我们需要明确一点，要实现内容的水平

div中内容垂直居中

12月前

年月日发(作者：快速生成标签)中内容垂直居中一、使用布局。是一种强大的布局方式，它可以很方便地实现内容的水平和垂直居中。我们可以通过设置父元素的为，然后使用-和-属性来实现内容的垂直和水平居中。。.{。:;-:;-:;}。。这样就可以实现中

the revolt of islam简介

11月前

年月日发(作者：下的文字居中)简介,.,-,,.&#;"",".".,.-&#;,."",,.,,.,&#;."",-,.,"",,.&#;,.

广告配音语音生成制作软件_mc喊麦自动生成器__文字转换语音配音软件

11月前

年月日发(作者：下载压缩包到本地)软件简介：炫勇语音自动生成器，炫勇文字转语音生成器(语音生成工具)是一款超级好用的语音辅助软件，该款软件是一款绿色免费版的文字转换语音软件，可以将文本文字换化成音频格式和视频格式的文件，采用了领先的语音合成

cs1.6改字体与颜色

11月前

年月日发(作者：程序设计上机实训第版答案).改字体与颜色用记事本打开和，找到(改字体),(改颜色)部分。不同的游戏分辨率可以使用不同的字体。例如，则在""""所在的区块修改。需要修改的地方：、：字体名称。字体文件在目录下，选用系统默认的英文

(转)CAD的图纸字体

11月前

年月日发(作者：特效相机软件下载)的图纸字体除投标及其特殊情况外，均应采取以下字体文件，尽量不使用字体，以加快图形的显示，缩小图形文件。同一图形文件内字型数目不要超过四种。以下字体形文件为标准字体，将其放置在软件的目录中即可。(西文花体)、

CAD软件中的文字与注释设计技巧

11月前

年月日发(作者：遍历)软件中的文字与注释设计技巧在软件中，文字与注释是模型设计中不可或缺的一部分。正确的文字和注释设计可以提高模型的可读性和交流效果。本文将介绍一些软件中的文字与注释设计技巧，帮助你更好地应用这些功能。.字体选择与设置在软件

传奇世界客户端颜色代码

11月前

年月日发(作者：四舍五入函数)传奇世界客户端颜色名列表单击一个颜色名或者进制值，就可以查看与不同文字颜色搭配的背景颜色。颜色名颜色值代码表颜色

如何在Word中设置文字的颜色和背景色

11月前

年月日发(作者：表格样式)如何在中设置文字的颜色和背景色是一款常用的文字处理软件，广泛应用于办公和学习中。在编辑文档时，设置文字的颜色和背景色可以提高文档的可读性和美观程度。本文将介绍在中如何设置文字的颜色和背景色。一、设置文字的颜色在中，

ChatGPT+Word的智能化文字生成和应用

9月前

[db:摘要]

Win10 系统替换 macOS 苹方字体 - 提升文字清晰度与显示渲染效果

9月前

[db:摘要]

【java spring boot使用easypoi实现word文档占位符替换文字和图片、Excel图片贴到对应单元格】

8月前

[db:摘要]

在word中怎么把文字往下挪挪_word排版技巧：如何对页面文本段落快速调整

8月前

[db:摘要]

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

7月前

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

精通高度安全环境下的无线渗透测试（二）

7月前

原文：annas-archivemd5D59E41F7ACC45B0B41190D5148AF7292 译者：飞龙 协议：CC BY-NC-SA 4.0 第八章&

如何解决wps文字打开出现乱码问题

5月前

年月日发(作者：数据库查询学生成绩)如何解决文字打开出现乱码问题篇一:快速解决文档出现乱码的问题挽救你的文件快速解决文档出现乱码的问题挽救你的文件有时候,我们打开一个文档的时候,会发现这个文档无法正常使用,因为其中出现了很多乱码,这让很多工

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

4月前

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

[特殊字符]【3分钟速成】Win11家庭版秒变专业版！解锁隐藏功能+详细文字教程

3月前

🔥【3分钟速成】Win11家庭版秒变专业版！解锁隐藏功能详细文字教程 导语： 还在为Win11家庭版缺少远程桌面、BitLocker加密、组策略管理而烦恼&#xf

图书管理系统源代码＜Java＞（带文字讲解）(javase)

3月前

带你编写图书管理系统（java） 很多同学在学校学习完Java后，就要开始做一个管理系统来通过课设考核，今天我就来交大家来实现一个图书管理系统。 一

Word【公式】公式和文字不能对齐，不在一条水平线 怎么办

3月前

背景 word里的mathtype公式居然不跟文字一条线 原因 未知 解决步骤 方法一：段落设置对齐方式 对于小范围的公式对不齐整，先来解决方案打个样 提示：后续

发表评论

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