Question

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

<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代码，如果它是最好的方法？

我试着在这里查看几个例子，但是无法使用它们来处理我的图像。

感谢

Answer 1

由于徽标是已知尺寸，因此您可以绝对定位，负边距等于宽度和高度的一半。

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

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

Answer 2

在您想要居中的项目上执行此类操作以下是输出示例：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 */
}

网页中的中心徽标（垂直和水平）

2 个答案: