Вертикально центрирующее содержимое: до /: после псевдоэлементов

Я пытаюсь добиться чего-то похожего на эту картину:

введите описание изображения здесь

У меня есть изображение (как часть слайд-шоу), завернутое в div, и с: before и: после псевдоэлементов, я показываю два элемента управления для перемещения на следующие (>>) или предыдущие (<<) изображения слайд-шоу ,

Пока у меня есть это:

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%.

Предполагая, что ваш элемент не является (потому что псевдоэлементы не допускаются к самозакрывающимся элементам), давайте предположим, что это

, поэтому способ может быть:

 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: ... } 

В противном случае просто поместите индикаторы в качестве фона в центральном положении.

Использование flex в css псевдоэлемента довольно просто:

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

Вы можете сделать это, не обращаясь к изображениям. (Иногда вы не можете, например, используя значки шрифтов внутри: до или: после).

 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, поэтому нажмите это изображение с отображением: block (изображения не отображаются по умолчанию: block)

Вот обновленная скрипка для вашего конкретного случая. http://jsfiddle.net/rdy4u/56/

Ниже приведен способ создания следующих и предыдущих элементов управления, используя: 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/

  • Являются ли CSS3 :: before и :: после псевдоэлементов, поддерживаемых IE9, или нет?
  • Могу ли я изменить высоту изображения в CSS: до /: после псевдоэлементов?
  • Как я могу сделать сгенерированный контент доступным?
  • Объединить атрибуты CSS и псевдоэлементы?
  • CSS: прежде чем на встроенном SVG
  • Давайте будем гением компьютера.