在响应式正方形中垂直对齐文本块

Posted 2023-03-05

【中文标题】在响应式正方形中垂直对齐文本块

【英文标题】：Vertically Align Text Block in Responsive Square

【发布时间】：2014-04-15 22:07:53

【问题描述】：

我想知道是否有人可以帮助我解决这个问题。基本上，我试图将位于正方形内的文本块垂直居中。正方形是响应式的，因此没有固定的宽度和高度。

我的 html 如下所示：

<div class="related-products">
<div class="row">
    <div class="large-15 medium-15 columns">

        <h5>Related Products</h5>
        <div class="row">

            <div class="small-15 medium-4 large-4 columns">
                <div class="product">
                    <a href="/"><img src="http://store.kitchenscookshop.co.uk/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/t/3/t317_mug_red_1pt.jpg"></a>
                    <dl>
                        <dt><a href="/">Product Name is Product Name</a></dt>
                        <dd><del>&pound;29</del> &pound;24</dd>
                    </dl>
                </div>
            </div>

        </div>
    </div>
</div>

我的 CSS 是这样的：

.product 
    position: relative;
    text-align: center;
    display: block;


.product dl 
    background-color: rgba(161,161,161,0.6);
    width: 100%;
    height: 100%;
    padding: 0 20%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;

我还设置了一个演示over here。

感谢您为我指明正确方向的任何帮助。

提前致谢！

【参考方案1】：

很遗憾，vertical-align 仅适用于内联元素。许多网络开发人员对此感到困惑，因为这似乎应该很容易做到。

我基本上是在使用这个解决方案：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

将.product dl的CSS更改为：

.product dl 
  background-color: rgba(161,161,161,0.6);
  width: 100%;
  height: auto; /* Won't work without this */
  padding: 0 20%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 50%; 
  -webkit-transform:translateY(-50%); 
  /* You may need to add more vendor prefixes; you can use http://prefixmycss.com */
  transform:translateY(-50%);
  z-index:2;

要修复灰色覆盖，我们可以从.product dl 中删除背景颜色并添加以下代码：

.product:after 
  position:absolute;
  display:block;
  content:'';
  background-color: rgba(161,161,161,0.6);
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;

【参考方案2】：

我将“display: table”添加到您的“.product dl”中，它似乎工作正常。另外，我认为您的“垂直对齐：中心”是“垂直对齐：中间”。告诉我你是怎么做的。

【参考方案3】：

我重新设计了一点。我看到你正在使用表格，而不是我会做的，但我猜它很好。校长还是一样的。但是，如果您从数据库中提取图像并且无法使用我的方法，那么我使用的 css 基础仍然可以通过简单地将 img 从背景中取出并将其修复到 div 来使用

.product 
    background: rgba(161, 161, 161, 0.6) url("http://store.kitchenscookshop.co.uk/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/t/3/t317_mug_red_1pt.jpg") center center no-repeat;
    height:400px;
    padding: 0 20%;
    overflow: auto;
    margin: auto;
 

FIDDLE