我正在尝试在网站的欢迎页面上对齐 3 张图片。
无论页面大小如何，公司徽标 (500*500) 都必须水平和垂直居中。
在主徽标的右侧和左侧，我有 2 个标志 (96*96)，它们指示用户将被重定向到网站上的哪种语言。
我希望徽标的水平中心都居中，即使它们没有相同的垂直尺寸（主徽标为 500，标志为 96），就像有一条水平线穿过所有的中间他们。
非常感谢您的帮助
问问题
51 次
2 回答
0
CSS
#horizon {
display: block;
height: 1px;
left: 0;
overflow: visible;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
#content {
height: 500px;
left: 50%;
margin-left: -250px;
position: absolute;
top: -250px;
width: 500px;
}
多年来我一直在使用这段代码，基本上它将#content 定位在页面的绝对中心（显然需要为您的应用程序调整这些数字）。
之后，添加另外两个图像，两边应该是直的。. .
于 2013-10-07T10:22:10.410 回答
0
啊，你能说得更具体点吗，我真的在用 CSS 做策略，而且我更经常失去其他任何东西 :)
目前我有这个......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta keywords="lamera", "h-racing", "gentleman driver", "course", "endurance" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>H-Racing</title>
<style type="text/css">
body {
background-image: url(/images/fond.png);
background-repeat: repeat;
}
.horizon {
display: block;
height: 1px;
left: 0;
overflow: visible;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
.contentlogo {
height: 500px;
left: 50%;
margin-left: -250px;
margin-top: 250px;
position: absolute;
width: 500px;
}
.contentflagfr {
height: 96px;
left: 50%;
margin-left: -446px;
margin-top: 452px;
position: absolute;
width: 96px;
}
.contentflaguk {
height: 96px;
left: 50%;
margin-left: 350px;
margin-top: 452px;
position: absolute;
width: 96px;
}
</style>
</head>
<body>
<a href="/fr/index.php"><img src="../images/france.png" align="left" class="contentflagfr"/></a>
<img src="/images/logo.png" class="contentlogo"/>
<a href="/en/index.php"><img src="../images/uk.png" align="right" class="contentflaguk"/></a>
</body>
</html>
于 2013-10-08T20:52:38.693 回答