私はこの写真に似たものを達成しようとしています:
画像 (スライドショーの一部として) を div でラップし、:before および :after 疑似要素を使用して、スライドショーの次の (>>) または前の (<<) 画像に移動する 2 つのコントロールを表示します。 .
これまでのところ、私はこれを持っています:
div {
position: relative;
}
div:before {
display:block;
height: 100%;
content: "stuff";
position:absolute;
top: 0; left: 0;
text-align: center;
}
ただし、疑似要素のコンテンツを中央に配置することはできません。テキストは次のように表示されます。
これを達成することは可能ですか?そうでない場合、最もセマンティックな回避策は何ですか? 要素自体を中央に配置するのではなく、コンテンツのみを中央に配置します。要素を 100% の高さに伸ばしたいと思います。
編集: http://jsfiddle.net/rdy4u/
Edit2:また、img は液体/液体で、div/img の高さは不明で、幅は 800px とmax-width
80% に設定されています。