3

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

我可以使用绝对定位将其固定在底部并从顶部跳出，但我无法使其居中。当我不知道图像的宽度并且容器的宽度是灵活的时，有没有办法做到这一点？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; }
4

3 回答 3

3

你可以用纯 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' 的元素。）

于 2013-04-11T21:34:29.993 回答
3

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

http://jsfiddle.net/GSKFD/

标记是一样的

<figure>
<a href="">
    <img src="http://placekitten.com/200/300" alt="" />
</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;
}
于 2013-04-12T15:19:50.833 回答
0

基本上你需要做一个 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>
于 2013-04-11T20:54:46.950 回答