Я пытаюсь добиться чего-то похожего на эту картину:
У меня есть изображение (как часть слайд-шоу), завернутое в 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%.