在IE下元素绝对定位position:absolute后水平居中text-align: center失效

最新推荐文章于 2023-02-24 11:07:20 发布
最新推荐文章于 2023-02-24 11:07:20 发布
阅读量695 收藏
点赞数
分类专栏： html web 文章标签： html IE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinweiwen/article/details/105252343
版权
web 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
html
5 篇文章 0 订阅
订阅专栏

如题，最近的项目中因为前端引用的框架对控件美化后有绝对定位的属性，在IE中居中时原有的实际透明化的控件没有居中，而画的假页面控件居中了，导致控件失效，本人前端水平比较差，没有找到好的解决办法，最后的替代办法是：
在控件前加了个空的span标签，span居中后将后面的控件挤到了中间从而实现功能

菜鸟问题记录

菜鸟记录
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS总结：让元素居中的方法
丹
10-30 1706
一、text-align:center; 这个是没有浮动的情况下，我们可以先将要居中的块级元素设为inline/inline-block，然后在其父元素上加上属性text-align:center;即可。如果要居中的块级元素直接是内联元素（span、img、a等），直接在其父级元素上加上属性text-align:center;即可； 二、margin:0 auto; 前提：居中的元素必须是块级元素，如果是内联元素，需要添加属性display:block;而且元素不浮动。 三、绝对定位+偏移(已知宽高，需计.
CSS实现水平居中与垂直居中
qq_44706779的博客
12-28 2017
属性指定元素文本的水平对齐方式（作用于子元素和文本）。其常用的值一般有三种： 属性规定元素应该生成的框的类型（作用与元素自身）。其常用的值一般有四种： (外边距)属性定义元素周围的空间（作用于元素自身）。它一共有四个属性值，可以简写。 属性指定一个元素的定位方法的类型（作用于元素自身）。其常用的值一般有四种： 属性应用于元素的2D或3D转换（作用于元素自身）。这个属性允许你将元素旋转，缩放，移动，倾斜等。这个属性比较复杂，在这里我们用到的主要是移动。 既然是要实现水平居中，那么父元素必然是一个块
前端 position: absolute布局 text-align: center失效解决办法
吕氏春秋i
02-24 837
项目ui要求图片上备注文字效果想实现这种效果可以使用布局但是使用失效的问题错位效果如何解决？
IE下 align-items 无反应
Red_Liu
03-27 2274
解决方法是针对IE把高度固定 height:100px !important; .footer_copy{ width:100%; display: flex; min-height: 100px; height:100px !important;/* align-items 对于最低高度min-height 不认可*/ align-items: center; align-cont...
IE、Firefox使用绝对定位(absolote) 网页居中布局 支持IE7,8,FF
攀升·Lislie
11-19 4698
对于企业官网来说，网站要有自己独特的个性，并且，不能使用太“老土”布局办法（使用table布局确实比较省事，但是当页面足够复杂，元素之间位置无序，甚至相互重叠，table就难以满足要求，而且对于一个大企业来说，使用table来控制布局，实在有点拿不上台面），再加上要适应不同分辨率屏幕的需求，布局就变得比较麻烦。       众所周知，使用绝对定位（position:absolute）的方式来布局
关于IE 浏览器的position居中定位的问题和 行块元素的设置问题
weixin_30747253的博客
06-04 428
这两天在写页面时，遇到一些IE浏览器显示不正常的问题，主要有两个： 1. 在td 中设置span 元素水平垂直居中，在谷歌浏览器中可以正常显示，但是在IE 中却无法显示出想要的结果，即不能实现垂直水平居中 2.将元素设置成行块元素时，老是显示不对齐，也不能显示想要的效果 3.第一个问题的css 设置如下： 1 table.shanye tbody tr td.td1 ...
absolute与margin实现完全垂直布局（IE8+）
screaming_color的博客
07-12 867
原理我们常常使用margin:0 auto;来实现块水平居中布局，这是因为默认情况下块级元素会占满一整行，若其设置了宽，之前占满一行的特性被覆盖掉了，从而产生了空白空间，而margin的auto值就是用来自动分配这些空间（两边auto，剩余宽度对半分）； 可是为什么没法垂直居中呢？块级元素的宽会占满一行，高度可没有这种特性，当然也不存在空白空间了。（这样说可能有点不太准确，但我的理解是这样）；
CSS中怎么让DIV居中亲自实验得出的结论
12-02
在本文中，我们将深入探讨如何在不同浏览器环境下，特别是针对Firefox和Internet Explorer（IE），实现`<div>`的水平居中和垂直居中。 首先，让我们关注水平居中。一种广泛采用的方法是通过设置`margin`属性为`auto...
CSS教程：网页图片垂直居中的使用技巧
09-27
在CSS中，有许多方法可以实现垂直居中，例如使用`display: flex`、`position: absolute`配合`transform`或者传统的`table-cell`布局等。在这个特定的场景中，我们将采用`display: table-cell`和`vertical-align: ...
绝对定位+margin auto垂直居中引发的思考
qq_38164763的博客
06-10 1029
占
解决绝对定位居中的问题
ljmkmnkl的博客
05-01 449
在使用绝对定位时，发现让用magin和padding让内容居中不是很好，在网上查了些资料，返现 position:absolute; right:0; left:0; margin:0; text-align:center;加了这些就可以实现居中了
前端居中问题总结
小哆啦小可爱的博客
07-05 180
一、text-align：center 只是将元素下面的内联元素居中，常见于文字水平居中。 二、flex布局 display：flex； justify-content: center； 水平居中 align-items: center 垂直居中 三、垂直居中 1，line-height = height时 2，父级盒子： position:relative; 相对定位 position:abso...
绝对定位position:absolute下，父元素高度塌陷/无法撑开父盒子的原因和解决方案
热门推荐
印第安米饭
06-23 4万+
我一直很困惑绝对定位后父盒子的高度会变为0，如何让绝对定位的元素撑开父盒子呢？ 我在StackOverflow上找到的高分解决方案如下： Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions...
css3中四种让元素水平居中的方式
tdl081071tdy的博客
10-18 405
第一种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
margin:0 auto；居中和text-align:center；居中的区别
dcyxlj的博客
01-11 954
text-align:center设置为文本或img标签等一些内联对象（或与之类似的元素）的居中。 margin:0 auto是设置块元素（或与之类似的元素）的居中。 像表格元素的文字居中用text-align:center，表格整体居中用margin:0 auto， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X
绝对定位（position:absolute）水平居中兼容IE6,7,8,Chrome等
iteye_1056的博客
07-30 980
先将容器的设为绝对定位，之后将容器左边界设在页面的一半处（50%）开始，最后将容器的的做边距设为容器宽度一半的负值。 注意：绝对定位后，容器将独立于正常的文档流。 [code="html"] #container { width: 960px; position: absolute; left: 50%; margin-left: -480px; }...
水平居中和垂直居中
weixin_33724059的博客
09-13 248
1.水平居中 (1) 文本、图片等行内元素的水平居中 　　给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。 (2) 确定宽度的块级元素的水平居中 　　通过设置margin-left:auto;和margin-right:auto;来实现的。 (3) 不确定宽度的块级元素的水平居中 　　方法一: 　　使用table标签，table本身并不是块级元素...
html { overflow: hidden; touch-action: none; content-zooming: none; } body { position: absolute; margin: 0 padding: 0 background: #111; width: 100%; height: 100%; } #canvas { width: 100%; height: 100%; background: #fff; position: absolute; } #text { position: absolute; left: 0; bottom: 10px; width: 100%; pointer-events: none; } #text div { position:absolute; color: #888; left:0 width:100% text-align:center; top:-32px; font-family: 'Poiret One', cursive; font-size:32px; }帮我定位错误
最新发布
05-29
您提供的代码有两处缺少分号： ... position:absolute; color: #888; left:0; width:100%; text-align:center; top:-32px; font-family: 'Poiret One', cursive; font-size:32px; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值