범위 내 텍스트의 세로 정렬

텍스트가 가운데에 정렬 된 스팬이 있어야합니다. 이전에이 목적으로 줄 높이를 사용했지만이 경우 일부 항목의 텍스트가 더 길어 더 이상 작동하지 않습니다.범위 내 텍스트의 세로 정렬

HTML :

<ul> 
    <li><a><span>Short</span></a> 
    </li> 
    <li><a><span>Why Should I Monitor?</span></a> 
    </li> 
</ul>

CSS :

ul { 
    position: relative; 
    overflow: hidden; 
} 
span { 
    background-color: rgba(216, 25, 11, 0.75); 
    display: block; 
    height: 70px; 
    line-height: 70px; 
    width: 135px; 
    color: black; 
    text-align: center; 
    /*margin: auto 0;*/ 
    font-weight: bold; 
    font-size: 15px; 
    position: absolute; 
    bottom: 14px; 
} 
li, a { 
    width: 135px; 
    height: 100px; 
    display: inline-block; 
}

편집 :

내가 그 범위 요소를주의 할 값 바닥이 있습니다 : 14px. 또한이 스팬에 애니메이션 효과를 적용합니다. 페이지로드 범위에 값 하단이있는 경우 : -70px (컨테이너가 오버플로 : 숨김,이 범위가 표시되지 않음) 및 .animate를 사용하여 표시되고 하단 : 14 픽셀로 이동합니다. 따라서 해결책은 이것을 고려해야합니다.

이 애니메이션 효과를 jsfiddle (http://jsfiddle.net/pr5cL/)에서 사용할 수 없지만 로컬로 만든 내 페이지에서 작동합니다. 어쩌면이 같은 http://www.sheerdigitaltest.net/janus/

출처

2013-07-17 renathy

텍스트가 1 줄인지 2 줄인지 확실하지 않으십니까? 은 flexbox 옵션을 제공합니까? –

flexbox 란 무엇입니까? – renathy

좋은데, 내 고객을 위해 충분한 브라우저 서포트가 없다. – renathy

뭔가 : 여기

$("ul li:not(.img_active)").mouseenter(function() {     
     $(this).find("span").css("bottom","-55px");  
     $(this).find("span").animate({bottom:15},500); 
    }).mouseleave(function(){ 
     $(this).find("span").animate({bottom:-70},500); 
    });

링크입니까?

span { 
    display: inline-block; 
    line-height:1.25; 
    vertical-align:middle; 
    width: 135px; 
    color: black; 
    text-align: center; 
    font-weight: bold; 
    font-size: 15px; 
} 

a { 
    background-color: rgba(216, 25, 11, 0.75); 
    height: 70px; 
    line-height: 70px; 
    font-size:0; 
    overflow:hidden; 
} 

li, a { 
    width: 135px; 
    display: inline-block; 
    vertical-align:top; 
} 

span { 
    -webkit-animation: slidein 2s ; /* Safari 4+ */ 
    -moz-animation: slidein 2s ; /* Fx 5+ */ 
    -o-animation:  slidein 2s ; /* Opera 12+ */ 
    animation:   slidein 2s ; /* IE 10+ */ 
} 
@-webkit-keyframes slidein { 
    0% { margin-top: 70px; } 
    100% { margin-top: 0; } 
} 
@-moz-keyframes slidein { 
    0% { margin-top: 70px; } 
    100% { margin-top: 0; } 
} 
@-o-keyframes slidein { 
    0% { margin-top: 70px; } 
    100% { margin-top: 0; } 
} 
@keyframes slidein { 
    0% { margin-top: 70px; } 
    100% { margin-top: 0; } 
}

Jsfiddle

없음 IE7 이하 버전을 지원합니다. 댓글 당 애니메이션 지원.

출처

2013-07-17 07:52:15 Alohci

애니메이션 효과가 필요하지 않습니다. jquery를 사용하는 등 내 자신의 onmouse 있습니다. 난 그냥 스팬 텍스트를 스타일링해야합니다. – renathy

차가움. 애니메이션 기술을 설명하지 않았습니다. 방금 한 가지 가능성을 제공했습니다. 이것을 jquery 접근법에 쉽게 적용 할 수 있어야합니다. 그냥 '바닥'보다는 '마진 - 톱'으로 땜질 중입니다. – Alohci

나는 당신을 잡을 수 없습니다 ... 여기 웹 사이트입니다 : http://www.sheerdigitaltest.net/janus/ – renathy

범위 내 텍스트의 세로 정렬

답변

관련 문제