Question

我正在尝试将元素（按钮）相对于它之前的元素2元素（图片）定位。图片和按钮之间有不同的文本。看看我的网站：

http://gorilla-gym.com/product-category/fitness-attachments/

我想要实现的是让“立即购买”按钮水平对齐每个产品列表，无论图片下方有多少文字。

在我看来，这种方式最合理的方式是将按钮相对于图片定位，但我无法弄清楚如何做到这一点。如果你们知道如何做到这一点，或者是否有更好的方法来实现我想做的事情，请告诉我。

提前致谢。

Answer 1

检查这个，我认为你想要这样的东西

http://jsfiddle.net/FWzzR/1/

<强> CSS

ul.products { 
    display:table; 
    width:100%; 
    table-layout:fixed; 
    border-collapse:separate; 
    border-spacing:10px; 
}

.products > li { 
    background-color: #4F81BD; 
    border:2px solid #385D8A; 
    position: relative; 
    width: 22.05%; 
    display: table-cell; 
    padding:10px; 
    padding-bottom:50px; 
    text-align:center; 
    vertical-align:top; 
}

.products > li >a { 
    display:block; 
}

.products a.button { 
    position:absolute; 
    bottom:10px; 
    left:50%; 
    margin-left:-40px; 
    font-size: 100%; 
    line-height: 1em; 
    cursor: pointer; 
    text-decoration: none; 
    padding: 6px 10px; 
    font-family: inherit; 
    font-weight: bold; 
    color: #FFF; 
    text-shadow: 0 1px 0 #FF6311; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8); 
    border: 1px solid #973100; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    background: #FD5200; 
    background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100)); 
    background: -webkit-linear-gradient(#FD5200, #CA4100); 
    background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%); 
    background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%); 
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1); 
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1); 
}

Answer 2

如果你想要的只是居中对齐底部的“立即购买”按钮，那么

.shopnow_button{
  display: block;
  margin: 0 auto; //something was overriding so I had to do !important here
  width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}

Answer 3

如果图片下面有不同数量的文字，那么这些元素的高度都会有所不同，而且您无法在图片下方水平对齐“立即购买”按钮。实现这一目标的唯一方法是确保所有div都具有相同的高度，然后您只需将商店按钮定位如下：

<div class="shop-now-div">
 <img src="yourimage.jpg">
 Lorem ipsum....
 <a class="button" href="#">Shop Now</a>
</div>


.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }

有两种方法可以让你的div高度相同 1）JavaScript（不推荐，这很痛苦） 2）一个表（在CSS中执行，因此您不会弄乱语义）

不幸的是，一些现代浏览器（我认为是Firefox）不会支持位置：相对于table-cell（你需要它），所以你不得不使用JS来使你的div高度相同......

最简单的解决方案：现在将您的商店按钮放在图像顶部 - 这样您就可以轻松地将它们水平对齐。：）

Answer 4

这里最好comment回答这个问题，只需设置位置：相对于祖父元素和位置：绝对于主题元素。

该解决方案确实没有在中间元素上设置任何定位。

CSS定位元素相对于祖父母？

4 个答案: