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

最新推荐文章于 2023-12-28 11:18:21 发布
最新推荐文章于 2023-12-28 11:18:21 发布
阅读量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居中后将后面的控件挤到了中间从而实现功能

菜鸟问题记录

菜鸟记录
关注
专栏目录
前端 position: absolute布局 text-align: center失效解决办法
吕氏春秋i
02-24 843
项目ui要求图片上备注文字效果想实现这种效果可以使用布局但是使用失效的问题错位效果如何解决？
IE下 align-items 无反应
Red_Liu
03-27 2281
解决方法是针对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 4701
对于企业官网来说，网站要有自己独特的个性，并且，不能使用太“老土”布局办法（使用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，剩余宽度对半分）； 可是为什么没法垂直居中呢？块级元素的宽会占满一行，高度可没有这种特性，当然也不存在空白空间了。（这样说可能有点不太准确，但我的理解是这样）；
元素加了position：absolute则该元素的text-align:center居中失效的解决办法
weixin_33826609的博客
12-04 1035
position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform:translate(-50%,-50%); 当元素变为position:absolute时，该...
flex布局与position中absolute/fixed冲突问题
最新发布
weixin_45713650的博客
12-28 1052
flex布局与position中absolute/fixed冲突问题
解决绝对定位居中的问题
ljmkmnkl的博客
05-01 453
在使用绝对定位时，发现让用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...
绝对定位（position:absolute）水平居中兼容IE6,7,8,Chrome等
iteye_1056的博客
07-30 984
先将容器的设为绝对定位，之后将容器左边界设在页面的一半处（50%）开始，最后将容器的的做边距设为容器宽度一半的负值。 注意：绝对定位后，容器将独立于正常的文档流。 [code="html"] #container { width: 960px; position: absolute; left: 50%; margin-left: -480px; }...
兼容IE的完全居中布局
screaming_color的博客
07-10 7700
代码详见： https://github.com/screamingColor/save/blob/master/test/center.html IE8下的效果： 本文采用绝对定位和flexbox两种方式：
html ie居中问题,关于居中布局和IE双倍边距bug
weixin_30838971的博客
06-30 215
今天google了一下css居中布局的问题，结果差不多都是引用了同一篇文章。在ie中要居中，只要在元素中定义text-align:center;的属性。而在firefox中，需要定义一个wrapper包裹器。然后指定margin-left:auto;margin-right:auto;的属性来使区块在firefox中居中。其实，我自己都是用margin:auto;的缩写margin属性来设定居中。...
absolute 元素完全居中的两种方法
劲枫的博客
08-09 3932
方法一：（不能微调） position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 方法二：（可微调） position:absolute; top:50%; left:50%; margin-top:-10px;(元素高度的一半) margin-left:-10px;(元素宽度的一半) ...
新手.关于css父级加入绝对定位后，子标签的text-align失效的解决方法
weixin_43949438的博客
06-08 1958
<div> <ul> <li>菜单</li> <li>菜单</li> </ul> </div> 问题：在给div加入绝对定位后，让li左浮动，设置左间距（margin-left）,让li并排且有间距的排列，但是却无法让li在ul里居中排列。 解决：此时只要让ul 设display...
【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法 ...
weixin_30691871的博客
06-26 230
比如下面这个例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js">&lt...
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、付费专栏及课程。

余额充值