Question

如何使图像显示在网页的中心，图像应该是浮动的，以便它在垂直和水平方向上都是中心..有很多片段，但没有一个是完整的，所以它对我没有任何用处:(我在网页上只有一个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

Answer 1

这是一个非常棘手的情况，这里讨论的次数比我想象的要多。

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

但如果您不了解JS并且确实想使用vertical-align，请尝试以下方法：http://www.vanseodesign.com/css/vertical-centering/

Answer 2

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/

为了清楚起见：我删除了＆lt; p＆gt;用于居中的标签，因为它们没有语义值（即，它们没有描述段落）。

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

希望有所帮助。

将图像居中放在网页上

2 个答案: