0

我怎样才能使图像出现在网页的中心图像应该是浮动的，以便它垂直和水平地位于中心.. 有很多片段，但没有一个是完整的，所以它不是 f对我有什么用:(我在网页中只有一个 jpg 没有别的

这是我尝试过的，这使它水平居中但不垂直居中

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title> Welcome </title>
  <style type="text/css">
  .centeredImage
    {
    vertical-align: middle;
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;

    }
</style>

</head>
<body>
<p class="centeredImage">
<img  src="mypic.jpg" alt="welcome " width ="1024" height = " 565" >
</p>

-T

4

2 回答 2

1

这是一个非常棘手的情况，在这里讨论的次数超出了我的想象。

有人会说使用 javascript 来测量窗口并手动移动图像。

但是如果你不懂 JS 并且真的想使用vertical-align，试试这个：http ://www.vanseodesign.com/css/vertical-centering/

于 2013-07-25T21:51:48.613 回答
0

HTML：

<img src="mypic.jpg" alt="Welcome" class="centered" />

CSS：

.centered {
    width: 1024px; height: 565px;
    position: absolute;
    left: 50%; top: 50%;
    margin-left: -512px; /* 1024 / 2 */
    margin-top: -283px;  /* 565 / 2 */
}

示例：http: //jsfiddle.net/mtvyp/

只是为了清楚起见：我删除了 <p> 用于居中的标签，因为它们没有语义价值（即，它们不是在描述段落）。

相反，我们使用绝对定位将图片放在窗口（其容器）的中间点。但是，这会将左上角置于该位置。为了实际居中，我们使用图片的定义尺寸并使用原始尺寸一半的负边距重新定位它。

希望有帮助。

于 2013-07-25T21:50:34.900 回答