2

私は最初、table/table-cell 表示方法を使用してテキストを垂直方向に中央揃えにしましたが、これはうまくいきました。問題は、コンテナーの高さのパーセンテージに切り替え、ブロック レベルの画像 (問題のテキストの兄弟) を使用してコンテナーのサイズを設定したときに発生しました。静的コンテナー サイズを宣言しないと、絶対配置テキストをコンテナーの高さと同じにすることはできなくなりました。明らかに、これは JS で簡単に解決できますが、私はその道をたどりたくありません。

また、画像を提供するためにpicturefill.jsを使用しているため、画像をcss背景として使用することはオプションではありません(誰かがそれを機能させるための提案がない限り)。

フィドルは次のとおりです。

http://jsfiddle.net/rHZdQ/

コードは次のとおりです。

HTML

<div class="tile">
  <a href="#">
    <img src="#">
    <div class="header-container">
      <h2>title</h2>
    </div>
  </a>
</div>

CSS

.tile {
  position: relative;
}

img {
  display: block;
}

a {
  display: block;
  position: relative;
}

.header-container {
  display: table;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

h2 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  z-index: 199;
}
4

2 に答える 2

4

CSS を使用して、絶対位置のイメージ オーバーレイでテキストを中央に配置する

次の HTML スニペットを検討してください。

<div class="tile">
    <div class="image-container">
        <img src="http://placekitten.com/400/400">
    </div>
    <div class="header-container">
        <div class="panel">
            <h2><span>percentage sized div</span></h2>
        </div>
    </div>
</div>

次の CSS ルールを適用します。

.tile {
    border: 3px solid #555;
    position: relative;
    margin: 6px;
    float: left;
}
.image-container img {
    display: block;
    height: 100%;
    width: 100%;
}
.header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.header-container .panel {
    display: table;
    width: 100%;
    height: 100%;
}
.header-container .panel h2 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.header-container .panel h2 span {
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.5);
}

親/包含ブロックはdiv.tileで、2 つの子要素があります。.image-containerこれはフロー内にあり、.header-container絶対位置にあるためフロー外です。

はフローティングであるため.tile、コンテンツ ( の画像) に合わせて縮小され、画像.image-containerのネイティブの高さと幅によって決定される寸法になります。

オーバーレイを作成するに.header-containerは、相対的に配置された親の左上に絶対配置し、幅と高さを 100% にして、包含ブロックまで拡張します (黄色のアウトラインを参照)。

内で、 に設定し.header-containerて無名テーブルを作成し、幅と高さを 100% に指定して.display: table.panel.header-container

.panel最後に、のネストされた要素に匿名の table-cell を定義し<h2>、 および を適用text-align: centerしvertical-align: middleて、テキスト ポストを水平方向および垂直方向の中央に配置します。

table-cell はテーブルの幅と高さ全体に拡張されるため、境界線または背景を使用してテキストのスタイルを設定する場合は、インライン ブロック要素でラップする必要があることに注意してください (<span>私の例では)。

コードは次の場所で表示できます: jsFiddle Demo

于 2013-05-24T11:48:41.053 に答える