1

我正在创建一个空白页面，页面中间有一个图像。我在 html 中对齐图像，但它不起作用。我只能左右对齐，如果我设置 aling="middle" 它不会做任何事情......

所以……我该怎么办？

4

3 回答 3

3

来自：http ://css-tricks.com/snippets/css/absolute-center-vertical-horizo​​ntal-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>
于 2013-04-10T19:58:09.093 回答
1

我也会推荐 Whistletoe 建议的方法

http://css-tricks.com/snippets/css/absolute-center-vertical-horizo​​ntal-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/

于 2013-04-10T20:22:26.857 回答
0

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

align 属性指定图像根据周围元素的对齐方式。

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

所以所有的工作都应该工作。如果要将图像放置在页面中心，则必须将“img”标签与任何文本标签（如“p”或“div”）包裹起来，并将“align”属性设置为该标签，而不是“img”标签。

于 2013-04-10T20:07:52.740 回答