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

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

enter image description here

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

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

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

Ответы

Ответ 1

Предполагая, что ваш элемент не является <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: ...
}

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

Ответ 2

Используя 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/

Ответ 3

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

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/

Ответ 4

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

Ответ 5

Используя flex box, вы должны сначала установить фиксированную ширину и высоту в родительском

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

Ответ 6

Я знаю, что опаздываю на вечеринку, но это простое гибкое решение сработало для меня, если оно поможет любому из вас.

.main-div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-div-name:before, .my-div-name:after {
    /* This content will be vertically centered with the attributes of the main-div */
}

Ответ 7

Если вы знаете размер, который хотите, чтобы он был, вы можете использовать! Если вы знаете размер элемента и не используете! Важный для элемента, все должно быть в порядке.

element {
  line-height : 110%;
}

element::before {
  content : "HI";
  line-height : 40px !important;
  vertical-align : middle;
}