如何水平居中图像，并将其对齐到容器的底部？

本文介绍了如何水平居中图像，并将其对齐到容器的底部？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何同时将图片水平居中并与容器底部对齐？

How can I center an image horizontally and aligned to the bottom of the container at the same time?

我已经能够通过自己水平地居中图像。我也能够通过自己对准容器的底部。但我没有能够做到这两个在同一时间。

I have been able to center the image horizontally by its self. I have also been able to align the bottom of the container by its self. But I have not been able to do both at the same time.

这里是我有：

.image_block { width: 175px; height: 175px; position: relative; margin: 0 auto; } .image_block a img { position: absolute; bottom: 0; } <div class="image_block"> <a href="..."><img src="..." border="0"></a> </div>

该代码将图像对齐到div的底部。我需要添加/更改以使图像在div内部水平居中吗？

That code aligns the image to the bottom of the div. What do I need to add/change to make it also center the image horizontally inside the div? The image size is not known before hand but it will be 175x175 or less.

推荐答案

.image_block { width: 175px; height: 175px; position: relative; } .image_block a { width: 100%; text-align: center; position: absolute; bottom: 0px; } .image_block img { /* nothing specific */ }

说明：绝对定位的元素将相对于具有非静态定位的最靠近的父元素。我假设你对你的 .image_block 显示感到满意，所以我们可以离开相对定位。

explanation: an element positioned absolutely will be relative to the closest parent which has a non-static positioning. i'm assuming you're happy with how your .image_block displays, so we can leave the relative positioning there.

因此，< a> 元素将相对于 .image_block 定位，底部对齐。然后，我们 text-align：center < a> 元素，它是 .image_block 的大小。

as such, the <a> element will be positioned relative to the .image_block, which will give us the bottom alignment. then, we text-align: center the <a> element, and give it a 100% width so that it is the size of .image_block.

< img> 将适当居中。