图像的垂直和水平对齐

时间:2012-05-09 11:35:52

标签: html css image alignment

我有一个占位符(正在建设中)网站,其中只包含一个带有徽标的图像。我与保证金水平对齐:0自动。 但是我怎么知道另外水平对齐图像。 或者用一句话:我如何完全集中图像。

Look here to see live: fiddle

此致 博多

编辑: 对于1:2(高度到宽度)的图像,请使用:

#wrapper img
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 799px;
    height: 404px;
    margin: -202px -399px 0;
    border: 1px solid black;
}

喜欢在链接线程中:))

感谢您的帮助

3 个答案:

答案 0 :(得分:1)

这样做

img#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
}

http://jsfiddle.net/DxByM/

答案 1 :(得分:1)

Urm ..你试过吗?

<div class='placeholder'>
   <img src='../images/myimage'>
</div>

该标记的CSS

.placeholder
{
position : absolute;
top : 50%;
left : 50%;
width : 200px; /* Width of the image in question */
height : 200px;/* height of the image in question */
margin : -100px 0px 0px -100px;
}

这会将您的图像带到页面的正中心。

答案 2 :(得分:0)

使用div来保存图像,并遵循以下规则:

margin-left: auto;
margin-right: auto;
margin-top:200px;  <!-- Will depend on your image -->
width:[your-image-width]px;

将图像居中