私はこの絵に似たものを達成しようとしています:
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%の高さに伸ばしたいと思います。
Edit2:また、imgは液体/流体であり、div/imgの高さは不明で、幅は800pxおよびmax-width
〜80%。
要素が<img>
でないと仮定します(自己閉鎖要素では疑似要素が許可されていないため)。それが<div>
であると仮定します。
div {
height: 100px ;
line-height: 100px;
}
div:before, div:after {
content: "";
...
display: inline-block;
vertical-align: middle;
height: ...;
line-height: normal;
}
Divの行の高さを変更できない場合、別の方法は次のとおりです。
div {
position: relative;
}
div:before, div:after {
position: absolute;
display: block;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
content: "";
width: ...
}
そうでない場合は、インジケータを背景として中心位置に配置するだけです。
疑似要素のcssでflexを使用するのはかなり簡単です:
.parent::after {
content: "Pseudo child text";
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
border: 1px solid red;
display:flex;
flex-direction:row;
align-items: center;
justify-content: center;
}
https://jsfiddle.net/w408o7cq/ を参照してください
画像に頼らずにこれを行うことができます。(たとえば、:beforeまたは:after内でフォントアイコンを使用することはできません)。
div {
position: relative;
overflow:hidden;
}
div:before, div:after {
position: absolute;
display: block;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height:20000px;
line-height:20000px;
content: ">>";
}
確かに、20000pxを使用するのは少し生意気です。divがそれより大きくなる場合は、pxを増やすだけです。
あなたの場合、div内に画像があるので、その画像をdisplay:blockでヒットします(画像はdisplay:blockにデフォルトではありません)
特定のケースの更新されたフィドルは次のとおりです。 http://jsfiddle.net/rdy4u/56/
フレックスボックスを使用して、最初に親で固定幅と高さを設定する必要があります。
div::after {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
:beforeおよび:after疑似要素を使用して、次および前のコントロールを作成する方法を次に示します。前/次ボタンの三角形を作成するためのボーダートリックと共に。クリックする高さの100%の領域はありませんが、三角形(矢印)を十分な大きさにすると、それを補うはずです。
div {
position: relative;
width: 800px;
max-width: 80%;
border: 1px solid red;
text-align: center;
margin: 0 auto;
}
div:before, div:after {
opacity: 0.5;
display:block;
content: "";
position:absolute;
width: 0;
height: 0;
}
div:before {
top: 40%; left: 0;
border-top: 25px solid transparent;
border-right: 50px solid blue;
border-bottom: 25px solid transparent;
}
div:after {
top: 40%; right: 0;
border-top: 25px solid transparent;
border-left: 50px solid blue;
border-bottom: 25px solid transparent;
}
動作するコードは次のとおりです。 http://jsfiddle.net/fiddleriddler/rPPMf/
私はパーティーに遅れていることは知っていますが、このシンプルなフレックスソリューションは、あなたのいずれかを助ける場合、私にとって魅力のように機能しました。
.main-div {
display: flex;
align-items: center;
}
.my-div-name:before, .my-div-name:after {
/* This content will be vertically centered with the attributes of the main-div */
}