9

始める前に:
別の質問の重複としてこれを閉じないでください。ここで Stackoverflow を検索したところ、その正確なケースが見つかりませんでした。

最も近いのは、私はこの質問を信じています。それでも、そこで与えられた返信は、私にとってはうまくいきません。段落が設定されているためだと思いますposition: absolute;。

それはHTMLです：

<ul>
    <li><img src="http://www.placehold.it/300x200" /><p><span>Lorem Ipsum</span></p></li>
</ul>

そしてCSS：

li {
  position: relative;
  float: left;
  overflow: hidden;
}

img {
  width: 100%;
  vertical-align: middle;
}

p {
  background-color: rgba(255, 0, 0, .3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

span {
    background-color: rgba(0, 255, 0, .3);
    vertical-align: middle;
}

フィドル: http://jsfiddle.net/DpVjZ/

vertical-align: middle;テキストを上から少しだけ突き出しますが、実際には真ん中ではありません。動的コンテンツであるため、スパンの高さがわからないため
、スパンを設定してposition: absolute;から適用top: 50%;してから機能しません。 リンクされた質問には、これは悪い習慣であると記載されていますが、私もこのアプローチを試してみましたが、結果はありませんでした。私を助けてください。margin-top: -x%;
display: table-cell

4

3 に答える 3

10

テキストまたは画像の想定される高さをハードコーディングしないと、(残念ながら) 3 層未満でこれを解決することはできません。

  1. 絶対位置の確立
  2. テーブルレイアウトを確立する
  3. 表セルのレイアウトを確立し、縦方向に揃えます: 中央

1 と 2 を組み合わせると高さが妨げられるようです: 100% は私にはわからない理由で機能しません。テーブルセルレイアウトの拒否は、古い「レイアウトにテーブルを使用しないでください」というミームの流用のように思えます。CSS はレイアウト用であるため、要素のセマンティクスを誤用していません。(残念ながら、意味的に意味のない div が必要です。)

<ul>
<li>
    <img src="http://www.placehold.it/300x200" />
    <div class="absolute">
        <div class="table">
            <div class="middle">
                <p><span>Lorem Ipsum</span>
                </p>
            </div>
        </div>
    </div>
</li>
</ul>


li {
    position: relative;
    float: left;
    overflow: hidden;
}
img {
    width: 100%;
}
.absolute, .table, .middle {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.absolute {
    position: absolute;
}
.table {
    display: table;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
p {
    background-color: rgba(255, 0, 0, .3);
}
span {
    background-color: rgba(0, 255, 0, .3);
}

http://jsfiddle.net/svachalek/vTGxx/4/

于 2013-01-21T21:26:23.633 に答える
2

p タグを削除します。とにかく、あなたはすでにそれを持っています。

CSS

li {
position: relative;
float: left;
overflow: hidden;
}

img {
width: 100%;
height: 100%;
}

span {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}

html

<ul>
<li><span>Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>

ウィンドウ IE9 および Chrome でテスト済み。

デモ用かどうかはわかりませんが、画像の上に赤い影が必要な場合は、スパン タグのクラスを作成し、そのクラスで新しいスパンを挿入します。

span.text {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}

span.redshade {
background-color: rgba(255, 0, 0, .3);
width: 100%;
height: 100%;

<ul>
<li><span class="redshade">&nbsp;</span><span class="text">Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>
于 2013-01-21T19:14:42.883 に答える
0

垂直方向の整列はCSSで難しいことですが、uがcssテーブルに精通している場合は達成するのは難しくありません。

<style>
      html, body, #wrapper { height: 100%; }
      #wrapper { display: table; width: 100%; } /* Create space */
      #wrapper > * { display: table-cell; vertical-align: middle; } /* table-cells can be verticaly aligned! */
      #wrapper > * > .container { display: block; margin: auto; width: 600px; border: 1px solid #000000; } /* Horizontal align */
</style>

<div id="wrapper">
  <section id="main">
    <div class="container">
      <p>
        I'm centered in a fluid layout! :D
      </p>
    </div>
  </section>
</div>

編集 トップこの要素を別の要素の上に配置するだけで、＃wrapperの位置を変更します。高さ：100％; 幅：100％; 左：0px; 上：0px; または要素使用位置なし：絶対;

于 2013-01-21T18:46:01.350 に答える