67

私はこの写真に似たものを達成しようとしています:

ここに画像の説明を入力

画像 (スライドショーの一部として) を 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-width80% に設定されています。

4

6 に答える 6

107

要素が でないと仮定すると<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: ...
}

それ以外の場合は、インジケーターを背景として中央に配置します。

于 2013-01-25T14:47:27.527 に答える
3

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

于 2016-06-23T19:53:44.027 に答える
1

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

于 2013-12-09T17:25:17.550 に答える