代码之家 › 专栏 › 技术社区 › Echo says Reinstate Monica

如何将图像水平居中并与容器底部对齐?

positioning css

Echo says Reinstate Monica · 技术社区 · 17 年前

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

我已经能够通过图像本身水平居中。我还能够通过它自己调整容器的底部。但我不能同时做到这两个。

以下是我的资料:

.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>

该代码将图像与分区底部对齐。我需要添加/更改什么,使图像在分区内水平居中?图像大小在手之前不知道,但它将是175x175或更小。

7 回复 | 直到 10 年前

Owen Ryan Doherty 17 年前

.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 显示,这样我们就可以将相对位置保留在那里。

这样, <a> 元素将相对于 图像块 这将给我们底部对齐。然后,我们 text-align: center 这个 <A & GT; 元素,并给它100%的宽度,使其 图像块 .

这个 <img> 在内部 <A & GT; 然后将适当居中。

Community Mohan Dere 9 年前

这同样有效(从中得到提示 question )

.image_block {
  height: 175px;
  width:175px;
  position:relative;
}
.image_block a img{
 margin:auto; /* Required */
 position:absolute; /* Required */
 bottom:0; /* Aligns at the bottom */
 left:0;right:0; /* Aligns horizontal center */
 max-height:100%; /* images bigger than 175 px  */
 max-width:100%;  /* will be shrinked to size */ 
}

One Crayon 17 年前

这是很棘手的;失败的原因是,在绝对定位的情况下,不能通过边距或文本对齐来定位。

如果该图像单独出现在DIV中,那么我建议这样做:

.image_block {
    width: 175px;
    height: 175px;
    line-height: 175px;
    text-align: center;
    vertical-align: bottom;
}

你可能需要坚持 vertical-align 改为调用图像;不进行测试就不确定。使用 垂直对齐 和 line-height 不过,这会比试图摆弄绝对位置要好得多。

Snehal S 11 年前

不会

margin-left:auto;
margin-right:auto;

添加到 .image_block 一个IMG做这个把戏?
请注意,在IE6中这不起作用(可能7个不确定)
在那里你得继续 图像块 集装箱部

text-align:center;

position:relative; 可能也是个问题。

Paige Ruten 17 年前

移除 position: relative; 线。我不知道为什么,但它能帮我解决问题。

workmad3 17 年前

你试过了吗?

.image_block{
text-align: center;
vertical-align: bottom;
}

dfortun 10 年前

#header2
{
   display: table-cell;
   vertical-align: bottom;
   background-color:Red;
}


<div style="text-align:center; height:300px; width:50%;" id="header2">
<div class="right" id="header-content2">
  <p>this is a test</p>
</div>
</div>