Question

我正在将图像对齐到div的底部，并将其与以下css对齐：

HTML：

<div class="hello">
  <img src="http://bit.ly/1gHcL8T" class="helloImage" />
</div>

的CSS：

.hello {
  width: 80%;
  height: 200px;
  position: relative; 
}

.helloImage {
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    bottom: 0;
}

但是，我想通过给它一个宽度百分比来使这个图像也有响应。我该如何做到这一点？

的jsfiddle： http://jsfiddle.net/8e7UM/1/

Answer 1

如果您支持现代浏览器，则可以执行this。

.helloImage {
    left: 50%;
    bottom: 0;
    width: 80%;
    position: absolute;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

here是基本版本，没有花哨的变换。

.helloImage {
    left: 10%;
    right: 20%;
    bottom: 0;
    position: absolute;
}

使一个绝对定位的居中图像响应

1 个答案: