图像在空白页的中间

问题描述：

我在页面中间创建一个带有图像的空白页面。我在html中对齐图像，但它不起作用。我只能左右对齐，如果我设置aling =“中间”，它什么也不做......图像在空白页的中间

那么...我该怎么办？

你能展示一些更多的代码吗？这听起来像你只是在'body'上寻找'text-align：center'' – 2013-04-10 19:56:09

尝试：'' – 2013-04-10 19:57:46

这不起作用....我只是想让图像处于空白页的中间。 – Bart 2013-04-10 20:00:12

答

来自：http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

<head> 
    <style> 
     img { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      width: 500px; 
      height: 500px; 
      margin-top: -250px; /* Half the height */ 
      margin-left: -250px; /* Half the width */ 
     } 
    </style> 
</head>

这工作，但我想在整个页面中间的图像，而不是在底部的中间 – Bart 2013-04-10 20:04:08

我不能使用CSS，有没有HTML代码呢？ – Bart 2013-04-10 20:08:03

请注意，此代码会导致*任何*图像居中。如果你想只瞄准一个，然后给它一个像“centerimage”的id，并将上面的'img'改为'＃centerimage'。 – Whistletoe 2013-04-10 20:17:59

答

http://www.w3schools.com/tags/att_img_align.asp

align属性根据周边元素指定的图像的对准。

元素是一个内联元素（它不会在页面上插入新行），这意味着文本和其他元素可以环绕它。因此，根据周围元素指定图像对齐可能很有用。

所以所有的作品应该工作。如果你想把图片放在页面中心，你必须用任何文本标签（如“p”或“div”）包装“img”标签，并将“align”属性设置为该标签，而不是“img”标签。

或更改为'display：block' – Whistletoe 2013-04-10 20:08:48

答

我还建议通过Whistletoe

建议的方法

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

HTML

<html> 
    <body> 
     <img src="http://fc03.deviantart.net/fs70/f/2012/149/2/9/fluffy_confused_kitten_gif_3_by_wonderfuday-d51jxyi.gif" alt="" /> 
    </body> 
</html>

CSS

img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 400px; 
    height: 300px; 
    margin-top: -150px; 
    margin-left: -200px; 
}

http://jsfiddle.net/NgpTw/

图像在空白页的中间

相关推荐