슬라이더 가운데 세로 텍스트

Question

내 blog에 템플릿을 사용하고 있지만 슬라이더의 텍스트를 세로로 정렬하고 싶습니다. 나는 패딩을 바꿔 보려고했지만 그때는 모바일에있는 동안 집중하지 않습니다. 또한 최상위 값을 0에서 백분위 수 값으로 변경하면 작동하지 않습니다.

.sora-slide .ty-thumb-bonos { 
    position: relative; 
    float: left; 
    margin: 0!important; 
    width: 100%; 
    height: 560px; 
    overflow: hidden; 
    display: block; 
    vertical-align: middle; 
} 

.sora-slide .sora-slide-con { 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: auto; 
    bottom: 0; 
    top: 0; 
    width: 100%; 
    padding: 20px 10px; 
    z-index: 2; 
    box-sizing: border-box; 
    text-align: center; 
    max-width: 460px; 
    display: table; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

Answer 1

당신은 .sora-slide .sora-slide-con

transform: translateY(-50%); 
top: 50%; 

이를 추가하고 내가 당신을 이해한다면,

margin: 0 auto; 

이 그것을해야와

margin: 15% auto; 

을 대체 할 수있다.

전체 CSS : 나는 transform 및 top을 추가하는 이유

.sora-slide .sora-slide-con { 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto; /* <- 0 auto */ 
    bottom: 0; 
    top: 50%;  /* <- 50% instead of 0 */ 
    width: 100%; 
    padding: 20px 10px; 
    z-index: 2; 
    box-sizing: border-box; 
    text-align: center; 
    max-width: 460px; 
    display: table; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    transform: translateY(-50%); /* <- transformY -50% */ 
} 

이해하려면, SO에이 anwser를 참조하십시오 https://stackoverflow.com/a/40530404/6773269 Andrew Bone에 의해.

그는 아주 잘 설명해주었습니다.

또는 aldo.roman.nurena 등

상기 :

TL; DR 상위 페이지/용기의 높이에서 50 %를 적용 변환 : translate Y를 자신 소자 높이에서 50 %를 적용한다.