0

我有一个徽标 (775 X 225)，我想在网页中居中（垂直和水平），然后在其下方放置一个链接“Enter”

<html>
<head>
 <Title> My website </Title>
 <style type="text/css">
   //centerlogo CSS class here ?
 </style>
</head>
<body lang=EN-US>
<div class'centerlogo"> <span></span>
<img src="images/logo.jpg">
</div>
</body>
</html>

这样做的最佳方法是什么，使其垂直和水平居中并适用于所有浏览器？

如果它是最好的方法，有人可以向我展示 CSS 类 - 或者如果它是最好的方法，则可以向我展示 javascript 代码？

我尝试在这里查看一些示例，但无法让其中任何一个与我的图像一起使用。

谢谢

4

2 回答 2

3

由于徽标的大小是已知的，因此您可以使用等于宽度和高度一半的负边距来绝对定位它。

.centerlogo {
    position: absolute;
    width: 775px;
    height: 225px;
    top: 50%;
    left: 50%;
    margin-left: -387px; //Half the width
    margin-top: -112px; //Half the height
}

无论窗口大小如何，它都将保持在屏幕的正中央。

于 2013-04-26T20:09:27.133 回答
-1

在你想要居中的项目上做这样的事情。
这是输出示例：http: //jsfiddle.net/FjLQY/1/

img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 128px; /* height of item */
    height: 128px; /* width of item */
}
于 2013-04-26T20:09:27.310 回答