0

高低を検索しましたが、そこにあるすべての状況が私にはうまくいきません。各リスト項目内でテキストを垂直方向に中央揃えするにはどうすればよいですか? 背景画像をカバーするリンク (クリック可能な領域) を保持する必要があります。

HTML

<section>
  <ul>
  <li><a id="monday" href="_monday.html"><span>Monday</span></a></li>
  <li><a id="tuesday" href="_tuesday.html"><span>Tuesday</span></a></li>
  <li><a id="wednesday" href="_wednesday.html"><span>Wednesday</span></a></li>
  <li><a id="thursday" href="_thursday.html"><span>Thursday</span></a></li>
  <li><a id="friday" href="_friday.html"><span>Friday</span></a></li>
  <li><a id="saturday" href="_saturday.html"><span>Saturday</span></a></li>
  <li><a id="sunday" href="_sunday.html"><span>Sunday</span></a></li>
  <li><a id="printAll" href="_week.html"><span>Print All Specials</span></a></li>
</ul>

CSS (それのいくつかのバージョン - 私はまだ多くを学んでいます:)

    section {
    max-width:86.029411764%;
    margin: -6px auto auto auto;
    overflow: hidden;
    }   

    section ul {
    display: inline-block;
    width: 35%;
    height: 100%;
    min-width: 320px;
    margin-left: 1rem;
    margin-right: 1rem;
    }

    section li {
    position: relative;
    display: block;
    background: url(_images/daybg_06.png) center center no-repeat;
    background-size: contain;
    padding-top: 14.95%;
    margin: 20px auto 20px auto;
    }

    section ul li a {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    font-size: 1.3rem;
    color: white;
    text-decoration: none;
    text-align: center;
    }

    section ul li a span {


    }

ここに更新されたリンクがあります - http://jsbin.com/ExEHAL/1/edit?html,css,output

4

3 に答える 3

0

個人的には自分の答えが好きではありません））しかし、現在の状況ではそれが最善だと思います。

section ul li a span {
    position: relative;
    top: 12px;
}

編集：

section ul li a span {
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    left: 0;
    top: 50%;
    margin-top: -10px;
}

最初の例は中央揃えではありません。2 番目の例は、必要なものに少し近いものです。margin-top: -10pxこれは、要素の高さ/ 2を意味することに注意してください

于 2013-09-10T09:14:54.527 に答える
0

使用する ：

-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
于 2013-09-10T07:51:02.703 に答える