Question

我正在尝试在网站的欢迎页面上对齐3张图片。

无论页面大小如何，公司徽标（500 * 500）都必须水平和垂直居中。

在主徽标的右侧和左侧，我有2个标记（96 * 96），表示用户将被重定向到的网站上的语言。

我希望徽标的水平中心全部居中，即使它们没有相同的垂直尺寸（主徽标为500，旗帜为96），如果有一条水平线穿过中间所有这些。

非常感谢你的帮助

Answer 1

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放在页面的绝对中心（显然需要为你的应用程序按摩数字）。

之后，添加两个进一步的图像，任何一方应该是直接前进。。

Answer 2

啊，你能否更具体一点，我真的开始使用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>

复杂的图像对齐

2 个答案: