1

我一直无法找到解决方案，只要我能保留一些东西，我愿意改变我需要的任何东西。

整个列表元素需要是一个链接，该链接中的文本需要以具有背景图像的列表项为中心。我需要这种液体，所以我选择使用 padding-top 来保持纵横比并创建正确的高度。使用该填充顶部来创建高度，我一生都无法弄清楚如何使文本垂直居中。我已经看到其他一些问题在某种程度上解决了这个问题，但我没有找到一个答案。 请帮我！

这是活生生的例子。我需要文本垂直对齐到蓝色元素的中间。 http://jsbin.com/OxuxECI/1/edit?html,css,output

HTML

<section>
      <ul>
          <li><a id="monday" href="_monday.html"><span>Monday</span></a></li>
      </ul>
    </section>

CSS

        section {
        position: relative;
        width: 86.029411764%;
        height: 100%;
        margin: -6px auto 0 auto;
        overflow: hidden;
        }   

        section ul {
        list-style-type: none;
        display: inline-block;
        width: 35%;
        min-width: 320px;
        padding: 0;
        margin: .8rem;
        height: 100%;
        }

        section li {
        width: 100%;
        display: block;
        background: url(_images/daybg_03.png) center center no-repeat;
            background-size: contain;
        margin: .8rem auto .8rem auto;
        text-align: center;
        font-size: 0;
        line-height: 0;
        }

        section ul li a {
        width: 100%;
        **padding-top: 14.95%;** /* This gives my container height */
        display: inline-block;
        text-decoration: none;
        text-align: center;

        }

        section ul li a span {
        font-size: 1.3rem;
        color: white;
        text-align: center;

            }
4

2 回答 2

1

好的，所以在搜索了高低之后没有运气，我想通了！！！

CSS

    section li {
position: relative;
width: 100%;
height: auto;
display: block;
background: url(_images/daybg_03.png) center center no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
margin: .8rem auto 0 auto;
list-style: none;
text-align: center;
font-size: 0;
padding-top: 14.95%;
}

    section ul li a {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
display: block;
text-decoration: none;
text-align: center;
background: rgba(0,191,85,.5);
}

    section ul li a span {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
line-height: 0;
font-size: 1.3rem;
color: white;
text-align: center;
background: rgba(0,159,255,.5);
    }

和 bin http://jsbin.com/enuBeyE/1/edit?html,css,output

我将背景颜色留在那里以获得每个容器的视觉帮助。

于 2013-09-13T05:00:19.243 回答
1

Infinity Designs 的回答效果很好，但前提是您不需要跨越多行的内容。

如果您确实需要在响应式、动态高度和宽度垂直居中且具有固定纵横比的容器内跨越多行的内容，则有好消息和坏消息：

  • 好消息：有一种纯 CSS 方法适用于 GC、FF、IE7+ 等。
  • 坏消息：代码并不漂亮：它需要四个（！）包装元素加上一个非语义分隔符。Infinity Designs 的方法只需要三个包装器，因此除非您需要文本换行，否则请使用它。

它本质上是 Infinity Designs 对响应式流体纵横比的方法，与Kizu 对另一个问题的垂直居中方法混合，使用并排的inline-blocks 和vertical align嵌套块。

JSbin 演示

示例代码：

<div class="w1">  
   <!-- make w2 <a> if like the asker you want it all to be a clickable link -->
   <span class="w2"><span class="hh"> </span>
      <span class="w3"> <!-- make w3 <a> if don't want the bkg clickable  -->
         <span class="w4"><!-- or, any block element -->
            Monday
         </span>
      </span>
   </span>
</div>
<style>

.w1 {  /* outer wrapper for aspect ratio */
    position: relative; /*or absolute*/
    display: block; /*or inline-block*/
    padding-top: 25%; /*aspect ratio*/
}

.w2 {  /* wrapper2 resets position to top */
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    }

.w3 {  /* wrapper3 and hh sit side by side */
    display: inline-block;
    width: 100%;
    text-align: center;
}
.w3, .hh {
    vertical-align: middle;
    display: inline-block;
}
.hh { height: 100% }

.w4 {  /* v.align applies to child block */
    display: block;
}

</style>
于 2013-11-25T15:34:10.763 回答