如何获得1px边框的居中div？ [英] How to get centered div with 1px border?
问题描述
我正试图在本页的内容部分找到1px边框：
http://www.clearpointsystems.com
正如您将看到的，我有一个标题/导航栏（看起来正确），但是边框周围
内容不居中，因为浏览器窗口没有正确调整大小
调整大小。
目标是内容周围的1px边框（div id =" page"），周围约有30px（或
2％）边距，边框/内容应调整为浏览器大小
窗口调整大小。
我现在所拥有的是一种黑客攻击：
#page {
位置：绝对;
顶部：80px;
宽度：80％;
高度：50％;
font-family：Arial，Helvetica，sans-serif;
border：1px solid＃333333;
text-align：left;
margin -top：0 auto 0 auto;
padding：30px 3 0px 30px 30px;
}
如何获得一个居中的div，其边缘均匀分布1px的边框？
提前致谢。
I''m trying to get a 1px border around the content section of this page:
http://www.clearpointsystems.com
As you will see, I have a header/nav bar (looks correct), but the border around
the content is not centered and does not resize properly as the browser window
is resized.
The goal is a 1px border around the content (div id="page") with about 30px (or
2%) margin all around and the border/content should resize as the browser
window is resized.
What I have now is something of a hack:
#page {
position:absolute;
top:80px;
width:80%;
height:50%;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid #333333;
text-align:left;
margin-top:0 auto 0 auto;
padding:30px 30px 30px 30px;
}
How do I get a centered div with an evenly-spaced 1px border all around?
Thanks in advance.
推荐答案
曾几何时* deko *写道：
Once upon a time *deko* wrote:
我正试图在本页的内容部分找到1px边框：
http://www.clearpointsystems.com
正如您将看到的，我有一个标题/导航栏（看起来正确），但内容边界
内容当浏览器窗口调整大小时，不会居中并且不会正确调整大小。
目标是围绕内容（div id =" page"）的1px边框，大约30px（或
2％）边缘和边框/内容应该调整大小，因为浏览器窗口调整大小。
我现在拥有的是一个黑客攻击：
#page {
位置：绝对;
顶部：8 0px;
宽度：80％;
高度：50％;
font-family：Arial，Helvetica，sans-serif;
border：1px solid＃333333;
text-align：left;
margin-top：0 auto 0 auto;
padding：30px 30px 30px 30px;
}
如何获得居中div周围有均匀间隔的1px边框？
提前致谢。
I''m trying to get a 1px border around the content section of this page:
http://www.clearpointsystems.com
As you will see, I have a header/nav bar (looks correct), but the border around
the content is not centered and does not resize properly as the browser window
is resized.
The goal is a 1px border around the content (div id="page") with about 30px (or
2%) margin all around and the border/content should resize as the browser
window is resized.
What I have now is something of a hack:
#page {
position:absolute;
top:80px;
width:80%;
height:50%;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid #333333;
text-align:left;
margin-top:0 auto 0 auto;
padding:30px 30px 30px 30px;
}
How do I get a centered div with an evenly-spaced 1px border all around?
Thanks in advance.
#page {
宽度：80％ ;
身高：50％;
font-family：Arial，Helvetica，sans-serif;
border：1px solid＃333333;
text-align：left;
保证金：0自动;
填充：30px;
}
你不能使用position：absolute;所以你不需要top：80px;
将margin-top设置为大于0的值。如果你愿意的话，那就是
只为最高保证金而没有别的。底部，左侧和右侧边缘
是另一回事。 margin：0 auto;设置顶部和底部边距
为0和auto如果这是你的目标，那就是div的中心？
-
/ Arne
骄傲的用户SeaMonkey。获取免费副本：
http://www.mozilla.org/ projects / seamonkey /
deko写道：
我正试图在此内容部分周围获得1px边框页面：
http://www.clearpointsystems.com
如何获得一个居中的div，边缘均匀分布1px边框？
I''m trying to get a 1px border around the content section of this page:
http://www.clearpointsystems.com
How do I get a centered div with an evenly-spaced 1px border all around?
用这个替换所有的样式表（不要不使用abs pos）：
body {margin：0; font-size：small;}
#header {width：100％; margin： 0;填充：10px 0 9px 0;
font-family：Arial，Helvetica，sans-serif;
font-size：16px; font-weight：bold; text -transform：uppercase;
letter-spacing：.2em; background：＃E8E7DD; text-align：center;}
#navtable a：link {color：#FFFFFF ;文字修饰：无; }
#navtable a：visited {color：#FFFFFF;文字修饰：无; }
#navtable a：hover {color：＃003300;文字修饰：无; }
#navtable td {background-color：＃00CC33; / * green * /
text-align：center; font-size：12px
font-family：Verdana，Arial，Helvetica，sans-serif;}
#sidebar {background：＃E8E7DD; font-family：Verdana，Arial，Helvetica，
sans-serif;
float：right; width：190px ; margin：0; padding：15px;}
#page {width：80％; font-family：Arial，Helvetica，sans-serif;
border：1px solid ＃333333; text-align：left;
margin：0 auto; padding：30px;}
-
Gus
Replace all of your stylesheet with this (don''t use abs pos):
body {margin:0;font-size:small;}
#header {width:100%;margin:0;padding:10px 0 9px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;font-weight:bold;text-transform:uppercase;
letter-spacing:.2em;background:#E8E7DD;text-align:center;}
#navtable a:link { color:#FFFFFF; text-decoration:none; }
#navtable a:visited { color:#FFFFFF; text-decoration:none; }
#navtable a:hover { color:#003300; text-decoration:none; }
#navtable td {background-color:#00CC33; /* green */
text-align:center;font-size:12px
font-family:Verdana, Arial, Helvetica, sans-serif;}
#sidebar {background:#E8E7DD;font-family:Verdana, Arial, Helvetica,
sans-serif;
float:right;width:190px;margin:0;padding:15px;}
#page {width:80%;font-family:Arial, Helvetica, sans-serif;
border: 1px solid #333333;text-align:left;
margin:0 auto;padding:30px;}
--
Gus
>> http://www.clearpointsystems.com
如何获得一个居中的div，边缘均匀分布1px边框？
How do I get a centered div with an evenly-spaced 1px border all around?
用这个替换所有的样式表（不要使用abs pos）：
Replace all of your stylesheet with this (don''t use abs pos):
看起来很棒！
这是我第一次尝试使用表格导航栏。我喜欢这个主意，因为
没有图像 - 保持页面大小不变。但是我认为我需要使用
绝对定位才能使标题正确。
绝对定位有什么问题？
FF和IE我的结果非常一致。
感谢您的帮助！
PS。您可以在线查看更改 - 我正在
时刻在侧栏上工作......
That looks great!
This was my first attempt at using a table navbar. I like the idea because
there are no images - keeps page size down. But I thought I needed to use
absolute positioning to get that header right.
What''s wrong with absolute positioning? I''ve had pretty consistent results in
FF and IE.
Thanks for the help!
PS. You can see the changes online - I am working on that sidebar at the
moment...
这篇关于如何获得1px边框的居中div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
