当宽度未知时，将图像水平居中并将其垂直放置在 div 内的底部

Posted 2023-03-05

【中文标题】当宽度未知时，将图像水平居中并将其垂直放置在 div 内的底部

【英文标题】：Center an image horizontally and position it on the bottom vertically within a div when width is unknown

【发布时间】：2013-02-13 19:21:33

【问题描述】：

我有一个基于百分比的数字。在那个盒子里，我有一个透明背景的图像。我需要将其水平居中，并将其固定在容器底部，同时让顶部脱离容器（见图）。

我可以使用绝对定位将其固定在底部并脱离顶部，但无法使其居中。当我不知道图像的宽度并且容器的宽度是灵活的时，有没有办法做到这一点？ display:table 有可能吗？

我的代码：

<figure class="feature">
<a href="#">
    <img src="image" /> 
    <p class="title-bar">Caption</p>
</a>
</figure>

.figure  position: relative; width: 50%; 
.figure img  position: absolute; bottom: 0; 

【问题讨论】：

图片的宽度是可变的吗？

@mooseman 是的，图片宽度也是可变的。

【参考方案1】：

请检查一下这个小提琴，有两种变体可以使图像居中

http://jsfiddle.net/GSKFD/

标记是一样的

<figure>
<a href="">
    <img src="http://placekitten.com/200/300"  />
</a>
</figure>

两种方法的一般风格

img
        vertical-align: bottom;
    

第一个变种

figure
position: relative;
width: 50%;
height: 300px;
background: #cad;

figure a
    position: absolute;
    bottom: 0;
    left: 50%;

figure img
    position: relative;
    left: -50%;

第二个

figure
    position: relative;
    width: 50%;    
    height: 300px;
    background: #cad;

figure a
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;

【讨论】：

获奖是因为它的 html 和 css 比 @Deborah 的回答更简洁。

【参考方案2】：

您可以使用纯 CSS 来做到这一点，但您需要两个额外的 div 来保存和定位元素。

这是 CSS：

.featureHolder 
  position: relative;
  /* height can be anything */
  height: 200px;

.feature  
  margin: 0;
  overflow: visible;
  /* width can be anything */ 
  width: 60%;  
  height: 100px;
  background: #cccccc; 
  position: absolute;
    bottom: 0;

.imageHolder  
  text-align: center;
  width: 100%;
  position: absolute;
    bottom: 0;

img 
  margin-bottom: -5px;

这是 HTML：

<div class="featureHolder">
  <figure class="feature">
    <div class="imageHolder">
        <a href="#">
            <img src="img" /> 
        </a>
    </div>
    <a href="#" class="title-bar">Caption</a>
  </figure>
</div>

标题也可以和图片放在同一个标​​签中，但是在这个例子中，它被分开了，所以我不必弄乱它。

这是JSFiddle 中的演示 - 给 .feature 任何宽度，img 仍应居中。 （顺便说一句，您的 CSS 不正确 - 它应该是“figure”或“.feature”，但不能是“.figure”，因为 figure 是一个类名为“feature”的元素。）

【参考方案3】：

基本上你需要做一个 left: 50% 然后 margin-left: - 无论图像的宽度是多少。这会将它定位在您的相对 div 中。我的示例假设您不知道图像的宽度。

http://jsfiddle.net/rVRT4/2/ http://jsfiddle.net/rVRT4/2/embedded/result/

$(document).ready(function()
   var width = $(".figure img").width(); 
   $(".figure img").css("margin-left", -(width/2));     
);

.figure  position: relative; width: 50%; height: 500px;
.figure img  position: absolute; bottom: 0; left:50%;

<div class="figure">
<a href="#">
    <img src="http://i.stack.imgur.com/4TtEY.jpg" /> 
    <p class="title-bar">Caption</p>
</a>
</div>

【讨论】：

有没有一种纯 css 的方式来做到这一点，没有 javascript？