开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在FF，IE6和IE7中运行的HTML中垂直和水平居中的实用解决方案

在FF，IE6和IE7中运行的HTML中垂直和水平居中的实用解决方案：

在不同的浏览器和版本中，实现垂直和水平居中的方法可能会有所不同。以下是一个在FF，IE6和IE7中运行的HTML中垂直和水平居中的实用解决方案：

<!DOCTYPE html>
<html>
<head><style>
  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    margin-top: -50px;
    margin-left: -100px;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="container">
    <p>居中文本</p>
  </div>
</body>
</html>

这个方法使用绝对定位和负边距来实现垂直和水平居中。top: 50%和left: 50%将容器的左上角放在页面的中心，然后使用margin-top: -50px和margin-left: -100px将容器的中心与页面的中心对齐。text-align: center用于水平居中文本。

这个方法在FF，IE6和IE7中都能正常工作，但在更新的浏览器中，您可能需要使用不同的方法来实现垂直和水平居中。

相关搜索:垂直和水平居中，同时遵守flexbox的html规则 DIV中的垂直和水平对齐 “Antd”库中的组件垂直和水平居中不起作用如何在div中居中(包括垂直和水平)并剪切多余的图像？使用css/html模拟图像中的垂直和水平页眉在页面上垂直和水平居中<div>的最佳方法是什么？如何使UIButton中的文本在垂直和水平方向上都绝对居中响应式浮动中的垂直和水平中心 Bootstrap中的垂直和水平大小调整卡使用flex在垂直和水平居中时从跨度中删除下划线如何在flutter的底部导航栏中添加一个垂直和水平居中的按钮？如何确保在PostScript中垂直和水平方向的线宽相同？如何使不同大小的字体在html跨度中垂直居中？在Xamarin中，mac和iOS平台的输入控件中的文本未垂直居中设置如何使文本在div中垂直和水平居中，同时在图片周围流动，图片的大小可能不同向Adding中的DT表添加垂直和水平滚动条如何用matlab计算物体中的垂直线和水平线？如何在网页中同时进行垂直和水平的鼠标滚轮滚动？如何在Python3x中设置列表的垂直和水平格式？在Compose中居中包含宽度和高度的TextView中的文本

相关搜索:

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

有帮助

没帮助

相关·内容

收集两种垂直居中的代码

.holder p的 position: relative; top:-50%; 通过控制绝对层的位置实现ie6，7下的垂直居中 holder div中的*position:absolute是只给...ie6和7看的css hack 对于水平居中要说的是如果holder div的width如果未指明100%，在ie7中它是不会自动延伸100%的，也就无法实现水平居中 .wrapper{ width:700px...: relative; top:-50%; 通过控制绝对层的位置实现ie6，7下的垂直居中 holder div中的*position:absolute是只给ie6和7看的css hack 对于水平居中要说的是如果...holder div的width如果未指明100%，在ie7中它是不会自动延伸100%的，也就无法实现水平居中 */ <div class="wrapper

8577 0

【CSS使用技巧】

容器的水平居中先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。　　...文字的垂直居中单行文字的垂直居中，只要将行高与容器高设为相等即可。比如，容器中有一行数字。　　...容器的垂直居中比如，有一大一小两个容器，请问如何将小容器垂直居中？　　...，也可以做出水平居中的效果。...容器的水平和垂直居中 HTML代码如下：　　　　　　　　　　　　</figure

7742 0

CSS使用技巧

容器的水平居中先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。　　...文字的垂直居中单行文字的垂直居中，只要将行高与容器高设为相等即可。比如，容器中有一行数字。　　...容器的垂直居中比如，有一大一小两个容器，请问如何将小容器垂直居中？　　...，也可以做出水平居中的效果。...容器的水平和垂直居中 HTML代码如下：　　　　　　　　　　　　</figure

1.2K1 0

CSS完美兼容IE6IE7FF的通用方法

important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)...important; /* IE7+FF */ width: 80px; /* IE6 */ } 2, IE6/IE77对FireFox *+html 与 *html 是IE...important解决) 2, 居中问题. 1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行....) 2).水平居中. margin: 0 auto;(当然不是万能) 3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签) 4, FF 和 IE...对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题. 5, ul 标签在 FF 下面默认有 list-style 和 padding .

9092 0

CSS使用技巧

容器的水平居中先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。...文字的垂直居中单行文字的垂直居中，只要将行高与容器高设为相等即可。比如，容器中有一行数字。...容器的垂直居中比如，有一大一小两个容器，请问如何将小容器垂直居中？...，也可以做出水平居中的效果。...容器的水平和垂直居中 HTML代码如下：　　　　　　　　　　　　</figure

1.3K1 0

css多浏览常见问题

.) 2).水平居中. margin: 0 auto;(当然不是万能) 3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签) 4, FF 和 IE...而hand 只适用于 IE. 1 针对firefox ie6 ie7的css样式现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!...: #999; } /* IE7 */ 那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。...important 为 FF 特别设置样式 div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，...参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集使用XHTML

1.1K3 0

CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

;的实际宽度是320px;而在IE6中，div的完整宽度是width，所以这个div和下面的div宽度一致。 ...第二招：IE和FF下对象居中问题 IE下大家应该知道只要设置body{text-align:center;}这样就可以居中显示。...所以FF就会居中显示。第三招：垂直居中（仅只用于一行）比如说一个高30px的div，问题默认是会显示在左上角，如果想垂直居中对其可以加个line-height:30px;样式。...目的就是解决浏览器默认值的问题。第五招：针对IE6、IE7、FF的css样式(这一招在特殊情况下经常用到) 原来建设网站经常使用!important来设置优先权，但有了IE7之后就不行了。...下面给大家个可以解决IE6、IE7、FF各个CSS优先权的方法 #1 { color: #333; } /* FF环境 */ * html #1 { color: #666; } /* IE6环境 *

2.2K4 0

Kubernetes中的水平扩展（HPA）和垂直扩展（VPA）的概念和工作原理

水平扩展（Horizontal Pod Autoscaling，HPA）图片水平扩展是Kubernetes中的一种自动调整Pod数量的方式。...当应用程序的负载增加或减少时，水平扩展可以根据指标自动增加或减少Pod的数量来应对不同的负载需求。水平扩展通过控制器管理器（Controller Manager）中的HPA Controller实现。...垂直扩展（Vertical Pod Autoscaling，VPA）图片垂直扩展是Kubernetes中的一种自动调整Pod资源配额的方式。...根据实际资源使用情况和配置的目标资源需求，垂直扩展会自动调整Pod的资源配额。垂直扩展可以通过修改Pod的资源请求和限制来改变Pod的资源配额。...水平扩展和垂直扩展可以同时使用，以实现更精确的资源管理和更高的弹性。

9494 1

Web程序员们，你准备好迎接HTML5了吗？

important 这句放置在另一句之上　　6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字...，就垂直居中了。...)和补白(padding)，幸运的是这个情况在IE6中有了好转但是IE6在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(...important;*background:blue; //这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句...IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。 FF与IE 1.

7882 0

网页设计中另人头疼的浏览器兼容问题

important 这句放置在另一句之上　　6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字...，就垂直居中了。...)和补白(padding)，幸运的是这个情况在IE6中有了好转但是IE6在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(...important;*background:blue; //这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句...IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。 FF与IE 1.

1.4K2 0

30+有用的CSS代码片段

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。.../***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child...+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF.../* IE7, IE8 */ #veinte { color/*\**/: blue\9; } /* IE6, IE7 -- acts as an !...不使用表格实现跨浏览器垂直水平居中图片这段代码可以在一个已知宽高的容器内垂直水平居中一个未知大小的图片，这是 IE 的一个hack：

9566 0

30+有用的CSS代码片段

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。.../***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child...+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf...but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue\9; } /* IE7...不使用表格实现跨浏览器垂直水平居中图片这段代码可以在一个已知宽高的容器内垂直水平居中一个未知大小的图片，这是 IE 的一个hack： <

4873 0

CSS布局解决方案（上）

（2）代码实例（3）优缺点优点:兼容性好，甚至可以兼容ie6、ie7 缺点:child里的文字也会水平居中，可以在.child添加text-align:left;还原 2）使用table+margin...详见：水平居中的3）和垂直居中的2）。见水平居中的3）和垂直居中的2）。...详见：水平居中的1）和垂直居中的1）。见水平居中的1）和垂直居中的1）。...和align-items，从而达到水平垂直居中。...详见：水平居中的4）和垂直居中的3）。见水平居中的4）和垂直居中的3）。

1.2K4 0

CSS教程:div垂直居中的N种方法「建议收藏」

相关教程：div水平居中的N种方法一、单行垂直居中如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可... 二、多行未知高度文字的垂直居中如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding... 24 25 26 27 三、多行文本固定高度的居中在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有...不过我们还其它的办法四、在Internet Explorer中的解决方案 在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。...垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同

1.2K3 0

最全的CSS浏览器兼容整理

CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。...BOX模型解释不一致问题在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!...所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。...mfr=true IE6,IE7,FF IE7.0 出来了，对CSS的支持又有新问题。...对IE6和FF的兼容可以考虑以前的!

1.6K3 1

CSS布局解决方案（居中布局）

、ie7 缺点:child里的文字也会水平居中，可以在.child添加text-align:left;还原 2）使用table+margin （1）原理、用法原理：先将子框设置为块级表格来显示（类似...ie7 ie8)不支持 5）使用flex+justify-content （1）原理、用法原理：通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。...详见：水平居中的3）和垂直居中的2）。见水平居中的3）和垂直居中的2）。...详见：水平居中的1）和垂直居中的1）。见水平居中的1）和垂直居中的1）。...详见：水平居中的4）和垂直居中的3）。见水平居中的4）和垂直居中的3）。

1.6K2 0

CSS深入理解学习笔记之vertical-align

计算，IE6/IE7下vertical-align百分比值不支持小数line-height）。...inline/inline-block元素如果单纯的设置middle，由于文字的下沉特性，图片只能够近似垂直居中，如果想要完全垂直居中，font-size需要设置为0。 ?...6、深入理解vertical-align:sub/super 　　html中和功效相同，同时字体也会略微缩小，是原字号的75%大小。　　...8、vertical-align糟糕的兼容性　　chrome和IE7下就有明显的不同。　　...原因：①IE7下图文一体；②middle的解释有问题　　解决方案：　　使用inline-block破坏图文一体； ?

1.1K5 0

CSS水平垂直居中的方法

原文链接:http://caibaojian.com/370.html 水平垂直居中，特别是使用在列表的时候经常会用到的，以前有需求的时候我也做过类似的代码，是使用display:table-cell...水平居中，如果知道元素的宽度，则可以使用 .cell{width:300px; margin:0 auto; text-align:center;} 如果是内联元素居中，那么直接用text-align:...，ie7 推荐使用inline-block这种水平居中的方法，既保留了块级元素特性，而且完美兼容。...另外你还可以使用表格的方式来水平居中。说完了水平居中，下面说垂直居中。如果元素是内联元素，并且只有一行，则我们可以通过line-height来设置与其高度同样大小，则实现了垂直居中了。...[endif]--> 可以使用IE的特有的条件语法，不过我习惯用ie hack来写。下面这个的代码实现了水平垂直多行代码（支持一行）居中对齐。目前测试IE、chrome和Firefox均兼容。

2271 0

div内图片和文字水平垂直居中「建议收藏」

大小不固定的图片、多行文字的水平垂直居中本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？...透明图片和背景定位实现图片水平垂直居中核心HTML代码为： <img src=".....效果图<em>和</em>上面的一样<em>的</em>，完美的<em>水平</em><em>垂直</em><em>居中</em>。原理也与图片一样，相信很容易理解<em>的</em>。再提供一下实例页面的链接，狠狠地点击这里，实例页面的最后一种方法向您展示了这种新颖<em>的</em>图片<em>垂直</em><em>居中</em><em>的</em>方法。...这里，我再提供一种我刚刚试验出来<em>的</em>一种新方法，实现大小不固定<em>的</em>图片<em>水平</em><em>垂直</em><em>居中</em>，综合来讲，比上面所有提供<em>的</em>方法还要优秀，且没有hack，兼容性上佳（支持<em>IE6</em>、<em>IE7</em>、Firefox、chrome、Safari...下为<em>在</em><em>IE7</em>下<em>的</em>效果截图：此方法原理是，<em>在</em>IE下使用font-size使图片<em>垂直</em><em>居中</em>显示，Firefox，chrome等现代浏览器使用line-height配合img本身<em>的</em>vertical-align

3.6K2 1

CSS-各种cs样式之浏览器兼容处理方式汇总大全（更新中...）

/ *zoom: 1;/* 触发ie6和ie7下的haslayout */ zoom:1; /* 另一种是不加星号的，我觉得还是加星号吧，因为*只ie6/7识别，而标准的浏览器又不需要这么废话...important 为 FF 特别设置样式 6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字...，就垂直居中了。...缺点是要控制内容不要换行 7、cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以 8、FF: 链接加边框和背景色，需设置 display: block，...9、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!

1.6K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭