【问题标题】:Vertical and horizontal align of image [duplicate]图像的垂直和水平对齐[重复]
【发布时间】:2012-05-17 22:03:13
【问题描述】:

我有一个占位符(正在建设中)网站,其中仅包含一张带有徽标的图片。我与边距水平对齐:0 auto。 但是我怎么知道另外水平对齐图像。 或者一句话:如何让一张图片完全居中。

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;
}

就像在链接的线程中一样:)

感谢您的帮助

【问题讨论】:

标签: html css image alignment


【解决方案1】:

有一个 div 来保存具有以下规则的图像:

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

将使您的图像居中

【讨论】:

  • 仅水平方向。 OP也想要垂直;见标题。
  • 我的错。见编辑。这将做他想做的事,只需要相应地调整边距顶部规则。
【解决方案2】:

嗯..你试过了吗?

<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;
}

这应该将您的图像带到页面的中心。

【讨论】:

  • 嗨,这适用于高度到宽度从 1:1 的正方形,我的图像有 1:2(你不知道这个......)。我摆弄了结果看开篇
【解决方案3】:

这样就可以了

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

http://jsfiddle.net/DxByM/

【讨论】:

  • 嗨,这适用于高度到宽度从 1:1 的正方形,我的图像有 1:2(你不知道这个......)。我摆弄了结果看开篇
  • 只要改变宽度、高度和边距以适应,margin-left 应该是宽度的一半,margin-top 应该是高度的一半。
猜你喜欢
  • 2011-07-25
  • 1970-01-01
  • 2020-10-21
  • 2018-06-23
  • 1970-01-01
  • 2011-02-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多