Question

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

那么......我该怎么办？

Answer 1

来自：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>

Answer 2

我还会推荐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/

Answer 3

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

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

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

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

图像在空白页面中间

3 个答案: