从顶部或中心垂直移动图像

Question

我有一个简单的Under Construction页面，并且想要将我的Under Construction图片与屏幕中间对齐。 水平方向没有问题，但垂直方向我什至无法定位图像。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Page Under Construction</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background-color:#d7df29;
width: 100%;
height:  100%;

}
.img {

text-align: center;
margin: 0 auto
vertical-align: middle;
top:500;    

    }

#html5 {
position:absolute;
top:0;
right:0;
}

</style>
</head>
<body>
<div class="img"><img src="1.jpg" alt="Under Construction"></div>
<div id="html5"><img src="images/img_html5_FR.png" height="120" width="120" alt="" />    </div>
<img src="images/fb2.png" style="position: fixed; top: 350px; left: 0px;"     title="Bierzyk na Facebook'u" alt="Bierzyk na Facebook'u">

</body>
</html>

Answer 1

如果您将.img的高度设置为100％，则可以将图像设置为该div（或body ）的background-image ，然后以这种方式垂直对齐。 这应该可以正常工作，因为页面上的其他元素是绝对固定的

Answer 2

加上这个

.img {
    position:absolute;
    top:50%;  
    left:50% ;
     background:red;
    margin:-64px 0 0 -64px;
    }

演示

从顶部或中心垂直移动图像

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-02-04 12:43:26

解决方案2
0 2013-02-04 12:47:38

从顶部或中心垂直移动图像

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-02-04 12:43:26

解决方案2 0 2013-02-04 12:47:38

解决方案1
0 已采纳 2013-02-04 12:43:26

解决方案2
0 2013-02-04 12:47:38