1

私はこれに対する解決策を見つけることができず、いくつかのことを維持できる限り、必要なものは何でも変更したいと思っています.

リスト要素全体がリンクである必要があり、そのリンク内のテキストは、背景画像を持つリスト項目の中央に配置する必要があります。この流体が必要なので、パディングトップを使用して縦横比を維持し、正しい高さを作成することにしました。そのパディングトップを使用して高さを作成すると、テキストを垂直方向に中央揃えにする方法が一生わかりません。この問題にいくらか対処する他のいくつかの質問を見てきましたが、答えられたものは1つも見つかりませんでした. 私を助けてください！

これがライブの例です。テキストを青い要素の中央に垂直に揃える必要があります。 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

Infinity Designs の回答はうまく機能しますが、複数行にわたるコンテンツが必要ない場合に限られます。

レスポンシブで動的な高さと幅が縦方向に中央に配置され、縦横比が固定されたコンテナ内で複数行にまたがるコンテンツが必要な場合は、良いニュースと悪いニュースがあります。

  • 朗報: GC、FF、IE7+ などで動作する純粋な CSS メソッドがあります。
  • 悪いニュース:コードはきれいではありません: 4 つの (!) ラッパー要素と非セマンティック スペーサーが必要です。Infinity Designs の方法では 3 つのラッパーしか必要ないため、テキスト ラップが必要でない限り、それを使用します。

これは基本的に、レスポンシブな流体アスペクト比に対する Infinity Designs のアプローチであり、ネストされたブロックの周りに横並びの s を使用して、この他の質問を中心とする垂直方向への Kizu のアプローチと混合されています。inline-blockvertical 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 に答える
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);
    }

そしてビンhttp://jsbin.com/enuBeyE/1/edit?html,css,output

各コンテナーの視覚的な助けになるように、背景色をそこに残しました。

于 2013-09-13T05:00:19.243 に答える