как центрировать выровнять по вертикали внутри слайдера

Question

Кто-нибудь понял, как центрировать выравнивание по вертикали в пределах ползунка (подпись и т. Д.)? Я попытался использовать valign-wrapper и valign как указано, но ничего не делает. Я также попытался использовать некоторые другие трюки css для выравнивания по центру, но ничего не работает.

HTML Slider:

<div class="slider valign-wrapper"> 
    <ul class="slides"> 
     <li> 
     <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image --> 
     <div class="valign caption center-align"> 
      <h3>This is our big Tagline!</h3> 
      <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
     </div> 
     </li> 
     <li> 
     <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image --> 
     <div class="valign caption left-align"> 
      <h3>Left Aligned Caption</h3> 
      <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
     </div> 
     </li> 
     <li> 
     <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image --> 
     <div class="valign caption right-align"> 
      <h3>Right Aligned Caption</h3> 
      <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
     </div> 
     </li> 
     <li> 
     <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image --> 
     <div class="valign caption center-align"> 
      <h3>This is our big Tagline!</h3> 
      <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
     </div> 
     </li> 
    </ul> 
    </div> 

Answer 1

Попробуйте это:

Изменить HTML следующим образом:

<li class="valign-wrapper"> 
    <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image --> 
    <div class="valign caption center-align"> 
    <h3>This is our big Tagline!</h3> 
    <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
    </div> 
</li> 

И добавить CSS:

.slider .slides li .caption { 
    position:relative; 
    top: unset; 
} 

Это работает для меня, но я не тестировали его на разных owsers. Хорошо смотря на Firefox.

Answer 2

Это то, что работает для меня

.slider .slides li .caption { 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%)!important;} 

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

Answer 3

Ниже будет выравнивание по центру ваших элементов

<li> 
     <img src="https://lorempixel.com/580/250/nature/1"> <!-- random image --> 
     <div class="center-align"> 
     <h3>This is our big Tagline!</h3> 
     <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
     </div> 
    </li>