web-dev-qa-db-ja.com

：before /：after擬似要素のコンテンツを垂直方向に中央揃え

私はこの絵に似たものを達成しようとしています：

enter image description here

Divにラップされた画像（スライドショーの一部として）があり、：beforeおよび：after擬似要素を使用して、スライドショーの次の（>>）または前の（<<）画像に移動する2つのコントロールを表示します。

これまでのところ、私はこれを持っています：

div {
  position: relative;
}

div:before {
  display:block;
  height: 100%;
  content: "stuff";
  position:absolute;
  top: 0; left: 0;
  text-align: center;
}

ただし、擬似要素のコンテンツを中央に配置することはできません。テキストは次のように表示されます。

enter image description here

これを達成することは可能ですか？そうでない場合、最も意味的な回避策は何ですか？要素自体を中央に配置するのではなく、コンテンツのみを中央に配置します。要素を100％の高さに伸ばしたいと思います。

編集：http://jsfiddle.net/rdy4u/

Edit2：また、imgは液体/流体であり、div/imgの高さは不明で、幅は800pxおよびmax-width〜80％。

csscss3css-selectorspseudo-element
50
dcastro

要素が<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: ...
}

そうでない場合は、インジケータを背景として中心位置に配置するだけです。

77
fcalderan

疑似要素の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/ を参照してください

20
david

画像に頼らずにこれを行うことができます。（たとえば、：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/

3
galeaspablo

フレックスボックスを使用して、最初に親で固定幅と高さを設定する必要があります。

div::after {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
2
Alaeddine

：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/

1
user3083754

私はパーティーに遅れていることは知っていますが、このシンプルなフレックスソリューションは、あなたのいずれかを助ける場合、私にとって魅力のように機能しました。

.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 */
}
1
Ken