将输入元素与表中的IE11中的position: absolute居中
在IE11中，要将输入元素与表中的position: absolute居中，可以使用以下步骤：
- 首先，确保输入元素和表都具有一个共同的父元素，这样我们可以将父元素设置为相对定位（position: relative），以便在其内部进行定位。
- 接下来，将输入元素设置为绝对定位（position: absolute），这样它可以脱离文档流，并相对于父元素进行定位。
- 然后，使用以下CSS属性和值来使输入元素居中：
- left: 50%：将输入元素的左边缘定位在父元素的水平中心位置。
- top: 50%：将输入元素的上边缘定位在父元素的垂直中心位置。
- transform: translate(-50%, -50%)：通过将输入元素的位置向左和向上移动自身宽度和高度的一半，使其在父元素中居中。
- 示例代码如下：
- 示例代码如下：
- 最后，根据实际需求调整输入元素的宽度、高度和其他样式属性，以适应所需的布局。
这种方法可以确保在IE11中将输入元素与表中的position: absolute居中。请注意，这只是一种解决方案，具体的实现可能因项目需求而有所不同。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，建议您访问腾讯云官方网站，查找与云计算相关的产品和服务，以获取更多详细信息。
相关·内容
2回答
我有一张画布和一张重叠的图像。在chrome和firefox上，居中对齐属性工作得很好，但在IE上就不行了。画布没有居中，但图像居中。我已经尝试了画布和图像居中的其他方法，但都不起作用。
我使用这个来显示交互式的RRD图。它使用框架。画布是由这个库创建的，这是可能的原因吗？(仅供参考:画布是在method：__addCanvas()的rrdGraphPng.js文件中创建的)
我的目标是重叠画布和图像，并将它们水平居中。
这是我的html (在javascript添加画布之后)：
<div id="graph-content">
<div id="
浏览 0提问于2018-04-05得票数 2
1回答
所以，我尝试用flexbox将2个div垂直居中，它在所有主流浏览器上都居中，但在IE11上却不能正确居中。
搜索一下，我发现有一个问题，在最小高度的div居中，但我没有使用它，所以我不知道哪里错了或丢失了。
.container {
position: relative;
display: flex;
align-items: center;
}
img {
max-width: 100%;
}
.prev {
width: 40px;
height: 40px;
background: rgba(0,0,0,.8);
position: absol
浏览 0提问于2018-01-13得票数 1
我有一个下拉菜单，它在任何地方都表现良好(甚至边缘！)除了IE11。
下拉菜单有：
position: absolute;
left: auto;
top: --nav-height;
我可以看到，在IE11中，它将自己对齐到根A框边框的右边，这似乎表明它并不是完全定位自己.
代码来自，但我无法让它在IE11上工作
所有其他浏览器：
IE11
浏览 0提问于2019-07-23得票数 0
回答已采纳
我试图找出如何仅使用div在CSS3框中动态地对文本进行居中，并找到了以下主题：
我使用了“方法1”，它解决了我的问题：
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
现在，我正试图理解这段代码的工作原理。我知道，当您将position更改为absolute时，可以从正常流中移除元素，并且可以定位它(通过使用top、left、.)与其所含元素有关。
因此，守则：
.container {
浏览 0提问于2014-11-29得票数 0
回答已采纳
我正在尝试在一个div中居中一个div。一开始，我想我尝试做水平居中，但这不起作用。我看了这篇文章的水平居中。
这是我的代码。下面是代码中重要的样式部分
#homepage {
position: relative;
}
#homepage canvas, #console {
position: absolute;
}
#console {
background: rgb(224,168,227);
width: 75%;
margin: 0 auto;
}
由于某些原因，控制台div不在主页div内居中。我有点困惑。
此外，我还在研究如何在垂直和水平方向上居中。推荐使用
浏览 3提问于2015-09-09得票数 2
使用css，我试图在屏幕上居中显示div包装器。它可以在Mozilla上运行，但不能在IE11上运行，我不知道为什么。我的网页在Windows Server 2008上运行。
css
div#wrapper
{
width: 1250px;
min-width:1250px;
max-width:1250px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
浏览 1提问于2015-09-26得票数 0
我使用以下CSS在页面中间居中一个div：
.someWrapper {
width: 100%;
height: 100%;
position: relative;
}
.centredDiv {
width: (some width);
height: (some height)
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%,
浏览 12提问于2014-11-18得票数 27
回答已采纳
我正试图创建一个图像滑块，需要是居中水平。为了使height工作，我需要将滑块的position设置为absolute。为了使滑块居中，我尝试将左、右设置为自动，如下所示。
#slider{
position: absolute;
width:80%;
height:50%;
left:auto;
right:auto;
}
但这不管用。我包括了一个代码片段，您可以在其中看到其余的代码。
还有人能告诉我为什么height没有position:absolute;就不能工作吗？
$(document).ready(function(){
$('.active').c
浏览 5提问于2014-12-29得票数 1
回答已采纳
1回答
在Firefox上查看针对IE11的代码时，我发现以下代码没有正确定位：
<div style="position: absolute;">
<div style="position: relative; top: 5px; left: 30px;">Union Affiliation:</div>
<div style="position: relative; top: 50px; left: 30px;">Biography:</div>
<div style="
浏览 1提问于2014-05-02得票数 0
回答已采纳
我想要中心不同的图像显示和隐藏，取决于用户点击。我在图像中心所做的是：
img {
margin-left: auto;
margin-right: auto;
display: block;
}
效果很好。但是它不适用于position: absolute; --在不知道position: absolute的情况下，只有css才能在body或parent中间水平地对position: absolute div进行居中。
浏览 4提问于2014-05-05得票数 0
回答已采纳
图片背景位置在50%左右，背景图片居中，但50%左右的绝对定位元素没有居中div元素，为什么？
代码如下：
<div style="position:relative;height:100px; background:url(images/demo.jpg) no-repeat 50% 0">
<div style="min-height:40px; width:140px; background-color:#aaa;position:absolute;top:0;left:50%;">
heloo this is
浏览 0提问于2013-02-27得票数 0
回答已采纳
4回答
我有一个导航层，我似乎不能让链接居中。
这是我正在使用的样式表
.Layer1 {
position:absolute;
width: 10%;
height: 95%;
list-style-position: outside;
list-style-type: disc;
background-color: #D2FFFF;
}
.Layer1 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 60
浏览 5提问于2009-02-10得票数 0
回答已采纳
下面的html创建一个页面，页面的<html>高度= 8，<body>高度= 0，但是具有“居中”的div也在屏幕上垂直地居中。怎么会这样呢？
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style=" height:100px; width:200px; margin: auto; position: absolute; top: 0; left: 0; bott
浏览 9提问于2015-06-22得票数 1
回答已采纳
在IE11中，页脚显示在屏幕的中间，而不是底部。我使用下面的CSS，这是工作文件，直到我们升级到IE11的浏览器。
#footer {
clear: both;
height:45px;
position: absolute;
bottom: 0;
left: 0;
border: none;
width: 100%;
}
注意：-我的页面有一个选项卡视图&我们在MVC中使用布局模板。请建议一些解决方案。
浏览 0提问于2016-03-10得票数 0
3回答
如何用绝对位置居中子对象
、、、
我在另一个div里面有两个div，我想居中子div.So，请告诉我该怎么做？
#father {
position: relative;
}
#son1 {
position: absolute;
width:285px;
}
#son2 {
position: absolute;
width:285px;
}
浏览 2提问于2014-11-25得票数 0
4回答
这是我在JSFIDDLE中的演示工作。
不使用表属性的NB
我想使类.box垂直居中
CSS
.main{ height:300px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:red; }
/* for centering */
.box{ display: inline-block;position:relative; top:50% }
.main{ text-align: center; }
HTML
<div class="main">
浏览 6提问于2014-01-24得票数 3
回答已采纳
2回答
我有一个带有position:relative的文本框容器div (div.tb)，包含输入和占位符div，它们都有position:absolute。
问题是输入文本是垂直居中的，但是占位符文本不是垂直居中的。
所以我需要占位符文本垂直居中，就像输入一样。
HTML：
<div class="tb">
<div class="placeholder">username</div>
<input type="text" name="tb-username" />
&l
浏览 2提问于2012-05-09得票数 0
回答已采纳
3回答
我在使用了JsFiddle。我将其更改为将div显示为方形对话框(水平和垂直居中)。结果是在。
如你所见，水平居中很容易，但我不能让它垂直居中。有人知道如何用纯CSS做到这一点吗？
编辑代码如下：
<div class="blind">
<div class="wrapper">
<div class="main">
I'm your div with an aspect-ratio of 1:1!
</div>
<
浏览 0提问于2013-12-02得票数 0
关于绝对定位元素居中的文章有很多，但它们都是针对固定尺寸和固定窗口的。
但是，我希望居中的position:absolute元素的尺寸是可变的(mxn-width)，这取决于浏览器的大小。我希望我的元素保持水平居中，而不管窗口的大小，甚至当用户更改窗口大小时也是如此。
这在没有JS的情况下有可能实现吗？
浏览 1提问于2011-12-29得票数 0
我试图理解使用position: relative;在容器中对文本进行居中的目的。
引用以下内容：并将其用作示例：
这两个容器的整体容器设置为position: relative;，文本设置为position: absolute;。
但两者都没有解释为什么需要将更大的容器设置为position: relative; (实际上为什么文本必须设置为absolute而不是relative)。
当然，如果解决这个中心化问题的唯一定位信息是文本元素上的position: relative;，则会更有意义。但是，这样做总是不能在容器中正确地对文本进行居中。
这里有什么逻辑？
浏览 5提问于2020-08-15得票数 0
回答已采纳
这是的后续文章。我想要理解为什么通过jQuery将position:absolute应用于div的CSS失败，而在静态样式中应用它是可行的。下面是两个jsfiddle示例：
作品：
没有工作：
请注意，两者之间唯一的区别是我在哪里应用了position:absolute。垂直居中始终有效，但在第一次加载页面时水平居中不起作用。如果手动调整窗口大小，div将正确居中。
到目前为止，我所有的测试都是在Ubuntu下的Chrome上进行的。
无论如何，我现在正在钻研web开发的世界，这些正是我需要开始理解的“怪癖”。
编辑：
@Jasper发现了一些有趣的东西。如果您调用.css()两次，第一次应用
浏览 1提问于2011-11-26得票数 2
回答已采纳
4回答
我需要在一个<div>中放置2个跨度，第一个跨度必须放在顶部，第二个跨度放在底部，就像南北一样。
<div>
<span class="north">N</span>
<span class="south">S</span>
</div>
为此，我考虑在2 <span>上使用position:absolute;。
div
{
display:inline-block;
width: 20px;
position:rel
浏览 0提问于2013-02-27得票数 7
回答已采纳
2回答
为了输入“复选框”和“收音机”(如果它们是强制性的)，我创建了一些css信息：
input[type=checkbox].is-mandatory::before {
position: absolute;
left: -5px;
top: -5px;
border: solid 1px #A94442;
border-radius: 4px;
width: 22px;
height: 22px;
content: "";
}
input[type=checkbox].is-mandatory::after {
浏览 14提问于2016-03-11得票数 1
回答已采纳
1回答
我正试图在另一个div内垂直地居中一个div (未知高度)。我遵循了一个教程，它似乎正确地显示在火狐v33 (桌面)，IE11和Chrome v39，但它没有正确地显示在移动Safari 7或8-看看我的，或html/css以下。
为什么移动Safari对此的处理与其他浏览器不同，我的选择是什么？我已经试过了flexbox，这在移动Safari中也不起作用。我知道垂直对中可能很棘手。我是否应该放弃，把以元素为中心的元素设定为固定的高度？如果高度是固定的，我可以让它工作-但在其他情况下，高度确实可能是可变的，所以我想知道如何使它工作没有固定的高度。
<div class="oute
浏览 0提问于2014-11-24得票数 0
回答已采纳
1回答
CSS Div位置行为
、、、
我在理解div位置(相对、绝对、固定)属性时遇到了问题。我基本上有一个绝对的div居中。在div中，应该可以垂直和水平滚动。在这个div里面应该是一个固定的标题，它的宽度大于屏幕( overflow )，还有一个内容div，它在垂直和水平方向上都有溢出。
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(10
浏览 2提问于2016-05-21得票数 0
1回答
我使用以下代码将画布居中：
position:absolute;
top:50%;
left:50%;
margin-top:-200px; /* Half of canvas height */
margin-left:-275px; /* Half of canvas width */
它在除了IE9和10之外的所有浏览器中都能完美地工作。在in浏览器中，它覆盖了整个页面。可以在IE中支持画布居中吗？
浏览 0提问于2013-05-24得票数 7
回答已采纳
10回答
在DIV中居中显示文本
、、、、
我一直被这个恼人的问题困扰，我有…我不能在div中居中显示文本。
我设法让文本从中心开始，但我希望整个文本居中。
这是我的例子--任何技巧和技巧都是非常有用的。
#box {
position: absolute;
top: 100px;
left: 50%;
height: 100px;
width: 450px;
text-align: center;
margin: 0px 0px 0px -225px;
border: 2px solid black;
}
#TEXT {
position: absolute;
top: 30px;
le
浏览 0提问于2014-09-19得票数 0
3回答
将绝对位置居中
、、
我知道如何使用position: relative;和margin:auto;轻松地在CSS中居中div，但是我有一个div，它应该在所有其他div的前面-所以我设置了z-index: 1000;和position:absolute;。如果不使用position: absolute;，我想不出任何其他方法来将这个设置在前面，如果我尝试相对，那么它将比其他所有东西都低到底部。我的问题是，如何将这个带有z-index: 1000; position: absolute;的div设置为居中？
我试过left: 20%;，它看起来很完美，但当它显示在更大的屏幕上或更小的屏幕上时，这一比例显然不会相同。
浏览 2提问于2012-10-01得票数 1
回答已采纳
1回答
使用IE11，但正在寻找解决方案IE9+，我正在调试为什么是。
根据我对IE调试器的了解--尽管相对父容器具有一定的宽度和高度-- position:absolute没有应用于::before伪，因此出现了奇怪的标签：
.chart span::before {
position: absolute;
left: 0;
right: 0;
top: 100%;
在Chrome，FF等，一切都很好:标签是低于条形图，如预期。对于为什么会发生这种情况，或者在IE中调试: target (我不能像在Chrome和FF中那样针对：：target)有任何见解吗？
浏览 4提问于2014-10-20得票数 2
回答已采纳
30回答
我在将属性position设置为absolute的元素居中时遇到问题。有人知道为什么图像没有居中吗？
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border:
浏览 6提问于2011-12-15得票数 828
我需要一些CSS帮助，我有一个用于加载页面的旋转器，完全居中，它是垂直居中的，但现在我如何为所有可能的屏幕宽度居中呢？
这是我的标记：
<!DOCTYPE html>
<html>
...
<body>
<div class="loading">
<div class="loader"></div>
</div>
...
</body>
</html>
这是我的样式表：
.loading {
p
浏览 1提问于2014-09-14得票数 20
回答已采纳
1回答
我有一个简单的按钮，它的内容是+或-
<button></button>
button::before {
content: '-';
}
button.active::before {
content: '+';
}
在我的Mac (Chrome、safari和Firefox)上安装的所有浏览器中，这个按钮的样式都是正确的，但是在IE11 (甚至Windows8.1上的FireFox )中，这个按钮的样式是不好的
有人能向我解释我的css中有什么问题，或者(很可能) IE11有什么问题吗？是否有修正，或者我是否应该更
浏览 4提问于2014-11-19得票数 1
回答已采纳
4回答
我正在寻找一种方法来显示一个确认对话框，始终在页面上居中，并在页面上浮动。
试过了，但它根本不是“总是居中”的，因为位置是固定的：
.Popup
{
text-align:center;
position: absolute;
bottom: 10%;
left: 27%;
z-index:50;
width: 400px;
background-color: #FFF6BD;
border:2px solid black;
}
有什么想法吗？谢谢
浏览 6提问于2009-07-30得票数 24
回答已采纳
This、this和this question类似，但没有帮助。 目标是使用百分比而不是绝对值将元素放在其父元素的中心。这样，如果大小发生变化，则位置值不需要更改。 下面的hover元素在outer下居中，但是定位需要依赖于hover和outer大小的绝对值。如果其中任何一个更改，则位置值必须更改。 在父级下居中可以用百分比实现吗？ Codepen：https://codepen.io/anon/pen/dadjpg <div id="outer">
<div id="hover"></div>
</div>
浏览 30提问于2019-02-09得票数 0
回答已采纳
1回答
如何使此容器居中，使其从顶部、左侧和右侧居中？我已经尝试了下面的方法，但不起作用。不确定我错过了什么：
HTML:
<div class="box">
<p>This is a sentence.</p>
</div>
CSS:
.box {
background-color: #444444;
color: #888888;
margin: 0 auto;
position: absolute;
width: 1000px;
height: 20px;
}
浏览 2提问于2013-03-01得票数 1
回答已采纳
3回答
我试图在jQuery进度栏内垂直和水平地居中文本。我管理它的水平中心，但不是垂直。
我的HTML
<div id='progressbar'><div id='label'>My text</div></div>
我的CSS
#progressbar {
width: 80%;
text-align: center;
overflow: hidden;
position: relative;
vertical-align: middle;
}
#label {
fl
浏览 4提问于2013-08-05得票数 8
1回答
我想在一个<div>中定位一个绝对的<button>元素，这个元素需要稍微超出按钮的范围，如下所示：
HTML：
<button class="container">
<div class="child">child</div>
</button>
CSS：
.container {
position: relative;
}
.child {
position: absolute;
top: -1rem;
left: 1rem;
}
这一点和我在Chrome中所期望的完
浏览 2提问于2016-07-06得票数 1
回答已采纳
4回答
为什么图像不居中？
、、、
<div id="tagcontainer"><img id="tagimg" src="img/tri.png"/></div>
CSS：
#tagcontainer {
width:100%;
top:0;
position:absolute;
}
#tagimg {
position:relative;
margin:auto;
}
不知道为什么我弄不明白。为什么这张图片没有居中？
浏览 3提问于2012-09-12得票数 1
回答已采纳
如何将宽度可变的元素水平居中放置在其他元素的顶部？
这里公认的答案是很适合居中可变宽度，但它会将其他所有内容都向下推：
通常我会这样做：
position:absolute;
width:200px;
left:50%;
margin-left:-100px;
但这需要设置宽度。
(它用于弹出的消息框，并且需要在其他文本的顶部居中。)
浏览 5提问于2013-07-16得票数 1
回答已采纳
我正在做一个网站，我试着垂直居中：
position: absolute;
width:1200px;
height:600px;
top: 50%;
left: 50%;
margin-left: -600px;
我的超文本标记语言是一个单一的div
浏览 0提问于2012-03-19得票数 30
我已经设法在输入字段中获得了搜索图标，并且可以将输入字段居中，边距:0自动，并将其显示为块(但这不会使图标位于字段中，而是将其保持在页面的右侧，因为它在块上-但这是我设法将其居中的唯一方法)。对于HTML/CSS来说，有没有合适的方法来做到这一点呢？想要学习。
目前有以下代码：
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.search {
position: relative;
color: #aaa;
font-size: 16px
浏览 0提问于2018-02-24得票数 0
我目前使用这种方法使用表和CSS将div居中：
<table width="69" border="0" align="center">
<tr>
<td width="59">
<div style="position:relative;">
<div style="position:absolute; text-align:left; top: 100px;">div2 content goes
浏览 0提问于2010-11-16得票数 0
我有如下所示的标记
<div>
<h1 style="text-align:center;" >Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
Content goes here
</div>
问题是标题2相对于图像之后的其余
浏览 0提问于2010-11-18得票数 9
回答已采纳
我正在学习svg，我想比较一下在不同浏览器上显示svg项目的效果。我的代码在firefox，chrome，edge，safari等上运行良好，但不能在ie11上运行。不幸的是，我开发的应用程序需要支持ie11，所以我需要强制我的代码正常工作。 这里是fiddle：https://jsbin.com/hemawaboqa/1/edit?html,js,output HTML <!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=e
浏览 75提问于2020-03-15得票数 0
1回答
我有一个视频，我想覆盖自定义按钮，并保留他们的定位在全屏以及。
下面的代码只处理一个问题(全屏div不是居中，而是位于屏幕顶部)。
如果我添加display: flex;，则全屏div的居中位置是正确的，但按钮现在放置的不正确。
如何使按钮保持其位置并在中心显示全屏项目？
我对CSS缺乏经验，所以我所犯的任何其他错误都值得指出。
const main = document.querySelector('.main');
const player = main.querySelector('.player');
const video = player.q
浏览 2提问于2020-11-22得票数 0
回答已采纳
4回答
我正在尝试使链接位于div的底部中心，并使其居中。
到目前为止，我已经想出了这个：
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
border: solid 1px black;
}
现在我怎么让它居中呢？我已经尝试将text-align:center;和margin:0 auto;添加到容器中，但它们都不起作用。
有人知道怎么做吗？
浏览 1提问于2014-11-29得票数 3
我试图居中的绝对定位的标志和其他元素，以遵循在一个100%的宽度标题。
什么是居中的绝对定位项目，并确保它和我将添加的其他元素居中的程序，当它们从320px移动到475px时。
下面是我到目前为止的代码，它以320px居中，但在我展开页面时不会保持居中：
@media (max-width: 475px) and (min-width: 320px)
#header {
height: 170px;
width: 100%!important;
position:relative;
}
#logo
left: 21%;
top: -7px;
position: absolute;
}
浏览 0提问于2015-11-25得票数 0
我无法对我的原子动画标志，或堆叠使用position:absolute。我也希望它是居中的，它不起作用。
目标：堆栈徽标+在particle.js分隔符上居中
我使用particles.js作为背景。
以下是网站：
浏览 2提问于2018-04-10得票数 0
回答已采纳
嗯，我有一个居中的div作为页脚，简单地使用：<div id="bottom-footer">Powered by Coolname</div>和样式：
#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}
这在PC浏览器中呈现正常：
但是当你尝试iphone的时候，它看起来是这样的：
显然没有居中，我做错了什么？
浏览 0提问于2012-10-15得票数 0
回答已采纳
2回答
我必须在文本的底部设置一个文本和一个图像。
文本和图像必须在div / span中居中。
div/span必须在33%左右对齐，如：
left: 33.33%
当我尝试这段代码时：
<span style="display:table;left: 33.33%;">
<div style="display:block;position:absolute;top:-35px;font-size:12px;">Text</div>
<div style="display:block;position:abso
浏览 0提问于2013-10-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
