0

これは標準的な質問のように思えるかもしれませんが、私はここでいくつかの「ベストプラクティス」を求めています。ウェブの周り（良い例はdesignspiration.net）には、画像があるサイトがあります。画像をホバーすると、ブロック/アルファ色が表示され、テキスト（通常はタイトル、キャプション、または数字）が水平方向と垂直方向の両方の中央に配置されます。

過去に私は通常、この効果を達成するために自分の道をハッキングしましたが、これを行うための最良かつ最も効果的/意味論的な方法を知ることは素晴らしいことです（CSS？jQuery？両方？）

デザインスピレーションのランディングページを見て、画像にカーソルを合わせると、アイデアがわかります。これらの画像の高さは固定されていないことに注意してください。

どんな実装でも本当にありがたいです（jsFiddleなど）そしてうまくいけばこれは他の人を助けるでしょう。

リチャードに感謝します

4

2 に答える 2

1

使用してくださいvertical-allign: middle;！ http://jsfiddle.net/zR4kk/

あなたはただあなたのコンテナdisplay:table とあなたのコンテンツを作る必要がありますdisplay: table-cell

HTML

<div class="area">
     <p>To look best, text should really be centered inside this div both vertically and horizontally.</p>
</div>​

CSS

.area { 
  width: 300px; 
  height: 300px; 
  background: green; 
  display:table;
    padding:5px;
}

.area p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}​
于 2012-09-01T00:39:50.247 に答える
1

この特定のケースでは、designspirationが使用するソリューションは、このブログ投稿の方法4：CSSを使用した垂直方向のセンタリングです。

<style>
    .container {
        position: relative; /* or absolute, if needed */
    }

    .covering {
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        -o-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out;
    }
    .container:hover .covering {
        opacity: 0.9;
    }

    .background {
        width: 100%; height: 100%;
        background: white;
    }
    .foreground {
        height: 30px;
        bottom: 0; right: 0;
        margin: auto;
        text-align: center;
    }
</style>

<!-- floated so that it fits the image; position: absolute would also work -->
<div class="container" style="float: left">
    <img src="(source image)" />
    <div class="covering background"></div>
    <div class="covering foreground">
        This will be centered
    </div>
</div>
于 2012-09-01T00:58:32.430 に答える