Html 如何始终在顶部居中显示图元？_Html_Css

Html 如何始终在顶部居中显示图元？

html css

Html 如何始终在顶部居中显示图元？,html,css,Html,Css,我只是想知道为什么我的以下代码不起作用：编辑：以下代码适用于Firefox3.5，我无法在其他浏览器上测试，它是否通用，或者是否存在一些问题 <html> <head> <style type="text/css"> #test{ position:fixed; left:50%; } </style> </head> <body> <div id="test">Center</div&g

我只是想知道为什么我的以下代码不起作用：

编辑：以下代码适用于Firefox3.5，我无法在其他浏览器上测试，它是否通用，或者是否存在一些问题

<html>
<head>
<style type="text/css">
#test{
    position:fixed;
    left:50%;
}
</style>
</head>
<body>
<div id="test">Center</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />asdf<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />asfd<br />
</body>
</html>


#试验{
位置：固定；
左：50%；
}
居中
<












/>

即使滚动，它也始终在顶部显示元素，但文本align:center根本不起作用

有人知道如何把这个元素移到屏幕中央吗

非常感谢

页边距：0px自动
或者，您可以使用Javascript/jQuery在用户每次调整窗口大小时对其进行求值并将其居中。
margin:0px auto

或者，您可以使用Javascript/jQuery在用户每次调整窗口大小时对其求值并将其居中。
要居中非文本对象，必须使用
margin:0px auto; display: block

忘记显示：块
是默认为显示：内联
的居中对象的常见问题，例如图像。
要居中非文本对象，必须使用
margin:0px auto; display: block

忘记display:block
是默认为display:inline
的居中对象（例如图像）的常见问题。
这取决于您的站点是否使用固定大小作为分辨率
如果您使用的是固定尺寸，那么请使用left属性将其居中，因为您正在固定位置
如果您根据用户的分辨率扩展站点，则需要使用javascript获取屏幕位置。使用x和y偏移。下面是一些获取死点的示例代码，您需要将y偏移量更改为屏幕顶部，以获得您想要的效果，但这是一个很好的起点，我相信您可以在此基础上获得您想要的效果
function showdeadcenterdiv(Xwidth,Yheight,divid) {
// First, determine how much the visitor has scrolled

var scrolledX, scrolledY;
if( self.pageYoffset ) {
   scrolledX = self.pageXoffset;
   scrolledY = self.pageYoffset;
} else if( document.documentElement && document.documentElement.scrollTop ) {
   scrolledX = document.documentElement.scrollLeft;
   scrolledY = document.documentElement.scrollTop;
} else if( document.body ) {
   scrolledX = document.body.scrollLeft;
   scrolledY = document.body.scrollTop;
}

// Next, determine the coordinates of the center of browser's window

var centerX, centerY;
if( self.innerHeight ) {
  centerX = self.innerWidth;
  centerY = self.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
  centerX = document.documentElement.clientWidth;
  centerY = document.documentElement.clientHeight;
} else if( document.body ) {
  centerX = document.body.clientWidth;
  centerY = document.body.clientHeight;
}

// Xwidth is the width of the div, Yheight is the height of the
// div passed as arguments to the function:
var leftoffset = scrolledX + (centerX - Xwidth) / 2;
var topoffset = scrolledY + (centerY - Yheight) / 2;
// The initial width and height of the div can be set in the
// style sheet with display:none; divid is passed as an argument to // the function
var o=document.getElementById(divid);
var r=o.style;
r.position='absolute';
r.top = topoffset + 'px';
r.left = leftoffset + 'px';
r.display = "block";
} 

根据您的站点是否使用固定大小作为解决方案，这将是问题的解决方案
如果您使用的是固定尺寸，那么请使用left属性将其居中，因为您正在固定位置
如果您根据用户的分辨率扩展站点，则需要使用javascript获取屏幕位置。使用x和y偏移。下面是一些获取死点的示例代码，您需要将y偏移量更改为屏幕顶部，以获得您想要的效果，但这是一个很好的起点，我相信您可以在此基础上获得您想要的效果
function showdeadcenterdiv(Xwidth,Yheight,divid) {
// First, determine how much the visitor has scrolled

var scrolledX, scrolledY;
if( self.pageYoffset ) {
   scrolledX = self.pageXoffset;
   scrolledY = self.pageYoffset;
} else if( document.documentElement && document.documentElement.scrollTop ) {
   scrolledX = document.documentElement.scrollLeft;
   scrolledY = document.documentElement.scrollTop;
} else if( document.body ) {
   scrolledX = document.body.scrollLeft;
   scrolledY = document.body.scrollTop;
}

// Next, determine the coordinates of the center of browser's window

var centerX, centerY;
if( self.innerHeight ) {
  centerX = self.innerWidth;
  centerY = self.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
  centerX = document.documentElement.clientWidth;
  centerY = document.documentElement.clientHeight;
} else if( document.body ) {
  centerX = document.body.clientWidth;
  centerY = document.body.clientHeight;
}

// Xwidth is the width of the div, Yheight is the height of the
// div passed as arguments to the function:
var leftoffset = scrolledX + (centerX - Xwidth) / 2;
var topoffset = scrolledY + (centerY - Yheight) / 2;
// The initial width and height of the div can be set in the
// style sheet with display:none; divid is passed as an argument to // the function
var o=document.getElementById(divid);
var r=o.style;
r.position='absolute';
r.top = topoffset + 'px';
r.left = leftoffset + 'px';
r.display = "block";
} 

当您将元素的位置更改为固定时，它将不再像普通块级元素（div、p等）那样水平填充。如果没有指定的width
参数，则其宽度仅为需要的宽度。由于块的宽度仅与文本相同，因此更改文本对齐方式不会改变外观，因为它已经向左和向右齐平，如果您理解我的意思的话
解决此问题的一种方法是指定宽度，但这可能会有问题，因为您不知道浏览器窗口的宽度。一种更简洁的方法（我不确定跨浏览器可能不起作用）是同时指定右侧的：
position: fixed;
left: 5px;
right: 5px;
text-align: center;

这将使块水平填充窗口，使其两侧各留下5px。那么文本对齐应该可以工作了
编辑：我刚刚测试过，在Firefox和InternetExplorer7中都可以使用。在此处尝试：
当您将元素的位置更改为“固定”时，它将不再像普通块级元素（div、p等）那样水平填充。如果没有指定的width
参数，则其宽度仅为需要的宽度。由于块的宽度仅与文本相同，因此更改文本对齐方式不会改变外观，因为它已经向左和向右齐平，如果您理解我的意思的话
解决此问题的一种方法是指定宽度，但这可能会有问题，因为您不知道浏览器窗口的宽度。一种更简洁的方法（我不确定跨浏览器可能不起作用）是同时指定右侧的：
position: fixed;
left: 5px;
right: 5px;
text-align: center;

这将使块水平填充窗口，使其两侧各留下5px。那么文本对齐应该可以工作了
编辑：我刚刚测试过，在Firefox和InternetExplorer7中都可以使用。请在此处试用：
非常感谢您的回复！我已经用一个测试页面更新了我的帖子，添加display:block仍然不起作用。非常感谢你的回复！我已经用一个测试页面更新了我的帖子，添加display:block仍然不起作用。非常感谢你的回复！我已经用一个测试页面更新了我的帖子，我不知道为什么它仍然不起作用…你需要你的doctype是XHTML 1.0过渡版。非常感谢你的回复！我已经用一个测试页面更新了我的帖子，我不知道为什么它仍然不起作用…你需要你的doctype是XHTML 1.0过渡版。嘿，nickf，非常感谢你的回答！然而，这对我的情况并不理想，我想在背景上加一点颜色来表示这是一个特殊的元素，宽度太宽会让它有点难看。嘿，尼克，非常感谢你的回答！然而，这对我的情况并不理想，我想在背景上加一点颜色来表示这是一个特殊的元素，宽度太宽会让它有点难看。