水平居中一个绝对定位的div [英] horizontally centering an absolute positioned div
问题描述
我要做的是有两组不同的输入元素
占据页面上的相同空间，其中只有一个是可见的
一次。你用两点javascript在两者之间切换。怎么
我已经完成了两件套中的一套绝对定位。
这是一个简短的版本：
< html>
< body>
< script>
函数toggleAdvanced（）{
var basic = document.getElementById（" base.result"）;
var advanced = document.getElementById（" advanced.result"）;
var advancedmode = false;
if（advancedmode）
{
basic.style.visibility =" visible";
advanced.style.visibility =" hidden";
advancedmode = false;
}
else
{
basic.style.visibility =" hidden";
advanced.style.visibility =" visible";
advancedmode = true ;
}
}
< / script>
< div style =" position：relative ; text-align：center">
< div class =" input" id =" base.result"
style =" overflow：auto; width：100％; height：200px; min-height：200px; max-height：200px; margin-left：0 ; margin-right：0; text-align：center; visibility：visible">
< input type =" text"名称= QUOT;第一及QUOT; value =" start">
< / div>
< div class =" input" id =" advanced.result"
style =" overflow：auto; width：700px; min-width：700px; max-width：700px; height：200px; min-height：200px; position：absolute; top：0; text-align：center; max-height：200px; visibility：hidden">
< textarea style =" width：560; height：160" name =" advanced.result.text">
< / textarea>
< / div>
< / div> ;
< a href =" javascript ：toggleAdvanced（）"> advanced< / a>
< / body>
< / html>
它可以工作，但我不能让绝对定位的部分是水平居中的
。我试过了left：0; right：0，
" left-margin：0; right-margin：0"，" left：50％; right：50％ "，
" text-align：center"
我正在Linux上使用firefox 1.0查看此内容（红帽9）。
我搜索和搜索过并尝试了各种各样的东西，但没有什么
似乎工作得很好。任何和所有的帮助将是非常好的
赞赏！谢谢。
- J
What I''m trying to do is have two different sets of input elements
which occupy the same space on the page, only one of which is visible
at a time. You switch between the two with a bit of javascript. How
I''ve done it is to have one of the two sets be absolutely positioned.
Here is a short version:
<html>
<body>
<script>
function toggleAdvanced() {
var basic = document.getElementById("base.result");
var advanced = document.getElementById("advanced.result");
var advancedmode = false;
if (advancedmode)
{
basic.style.visibility="visible";
advanced.style.visibility="hidden";
advancedmode=false;
}
else
{
basic.style.visibility="hidden";
advanced.style.visibility="visible";
advancedmode=true;
}
}
</script>
<div style="position:relative;text-align:center">
<div class="input" id="base.result"
style="overflow:auto;width:100%;height:200px;min-height:200px;max-height:200px;margin-left:0;margin-right:0;text-align:center;visibility:visible">
<input type="text" name="first" value="start">
</div>
<div class="input" id="advanced.result"
style="overflow:auto;width:700px;min-width:700px;max-width:700px;height:200px;min-height:200px;position:absolute;top:0;text-align:center;max-height:200px;visibility:hidden">
<textarea style="width:560;height:160" name="advanced.result.text">
</textarea>
</div>
</div>
<a href="javascript:toggleAdvanced()">advanced</a>
</body>
</html>
It works, but I cannot get the absolutely positioned part to be
horizontally centered. I''ve tried "left:0;right:0",
"left-margin:0;right-margin:0", "left:50%;right:50%",
"text-align:center" etc. etc. etc.
I am viewing this using firefox 1.0 on Linux (red hat 9).
I have searched and searched and tried all kinds of things, but nothing
seems to work quite right. Any and all help would be greatly
appreciated! Thanks.
--J
推荐答案
" jlub" < EL ****** @ yahoo.com>在消息中写道
news：11 ********************** @ z14g2000cwz.googlegr oups.com ...
"jlub" <el******@yahoo.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...
我要做的是有两组不同的输入元素
占据页面上的相同空间，一次只能看到其中一个。你用两点javascript在两者之间切换。
我做到了这一点就是让两套中的一套绝对定位。
这是一个简短的版本：
如果你使用display：没有可见性：隐藏，你不需要做任何定位
。显示：none将其应用的元素从
流出。
< html>
< body>
< script> ;
函数toggleAdvanced（）{
var basic = document.getElementById（" base.result"）;
var advanced = document.getElementById（" advanced.result"）;
var advancedmode = false;
if（advancedmode）
{
basic.style.visibility =" visible" ;;
advanced.style.visibility =" hidden" ;;
advancedmode = false;
}
{
basic.style.visibility =" hidden" ;;
advanced.style.visibility ="可见" ;;
advancedmode = true;
}
< / script>
< div style =" position：relative; text-align：center" ;>
< div class =" input" id =" base.result"
style =" overflow：auto; width：100％; height：200px; min-height：200px; max-height：200
px; margin-left：0; margin-right：0; text-align：center; visibility：visible"> < input type =" text"名称= QUOT;第一及QUOT; value =" start">
< / div>
< div class =" input" id =" advanced.result"
style =" overflow：auto; width：700px; min-width：700px; max-width：700px; height：200p
x; min-height：200px; position：absolute; top：0; text-align：center; max-height：200p
x; visibility：hidden"> < textarea style =" width：560; height：160" name =" advanced.result.text">
< / textarea>
< / div>
< / div>
< a href =" javascript ：toggleAdvanced（）"> advanced< / a>
< / body>
< / html>
它有效，但我不能让绝对定位的部分水平居中。我试过了left：0; right：0，
left-margin：0; right-margin：0，left：50％; right：50％，
" text-align：center"
我正在Linux上使用firefox 1.0查看此内容（红帽9）。
我搜索并搜索了各种各样的东西，但是什么都没有
似乎工作得很好。任何和所有的帮助将非常感激！谢谢。
- J
What I''m trying to do is have two different sets of input elements
which occupy the same space on the page, only one of which is visible
at a time. You switch between the two with a bit of javascript. How
I''ve done it is to have one of the two sets be absolutely positioned.
Here is a short version:
If you use display:none instead of visibility:hidden, you don''t need to do
any positioning. Display: none takes the element to which it applies out of
the flow.
<html>
<body>
<script>
function toggleAdvanced() {
var basic = document.getElementById("base.result");
var advanced = document.getElementById("advanced.result");
var advancedmode = false;
if (advancedmode)
{
basic.style.visibility="visible";
advanced.style.visibility="hidden";
advancedmode=false;
}
else
{
basic.style.visibility="hidden";
advanced.style.visibility="visible";
advancedmode=true;
}
}
</script>
<div style="position:relative;text-align:center">
<div class="input" id="base.result"
style="overflow:auto;width:100%;height:200px;min-height:200px;max-height:200
px;margin-left:0;margin-right:0;text-align:center;visibility:visible"> <input type="text" name="first" value="start">
</div>
<div class="input" id="advanced.result"
style="overflow:auto;width:700px;min-width:700px;max-width:700px;height:200p
x;min-height:200px;position:absolute;top:0;text-align:center;max-height:200p
x;visibility:hidden"> <textarea style="width:560;height:160" name="advanced.result.text">
</textarea>
</div>
</div>
<a href="javascript:toggleAdvanced()">advanced</a>
</body>
</html>
It works, but I cannot get the absolutely positioned part to be
horizontally centered. I''ve tried "left:0;right:0",
"left-margin:0;right-margin:0", "left:50%;right:50%",
"text-align:center" etc. etc. etc.
I am viewing this using firefox 1.0 on Linux (red hat 9).
I have searched and searched and tried all kinds of things, but nothing
seems to work quite right. Any and all help would be greatly
appreciated! Thanks.
--J
2004年12月20日12:50:19 -0800， jlub" < EL ****** @ yahoo.com>写道：
On 20 Dec 2004 12:50:19 -0800, "jlub" <el******@yahoo.com> wrote:
我正在尝试做什么...
What I''m trying to do...
[bla bla bla，snip]
还有另一个Googlenaut，这个... ...
我们没有这个战争吗？几年前还有C-Net？
至少他们接受了提示并且大部分时间已经离开了
" Big-8"从那以后，Usenet NG独自一人。
又一次？
-
Rex
谢谢，就像一个魅力。
除了Firefox 1.0中似乎有一个错误，''height''是<将样式设置为无后，
不受尊重并动态地返回内联
。我必须检查一下这是否是一个已知问题。
--J
Thanks, works like a charm.
Except there appears to be a bug in Firefox 1.0 where the ''height'' is
not honored after setting the style to "none" and back to "inline"
dynamically. I''ll have to check to see if it''s a known problem.
--J
这篇关于水平居中一个绝对定位的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
