응답 배경의 절대 중심 텍스트

텍스트를 세로 및 가로 가운데에 배치해야합니다. 원 배경과 링크를 만들고 있는데, 응답 성이 필요하며 링크 높이에 선 높이를 설정할 수 없습니다. 이유는 다음과 같습니다응답 배경의 절대 중심 텍스트

HTML 나는

line-height: 0;

그것은 작동하지 않습니다 시도

a.Previous, a.Next { 
    float: left; 
    text-decoration: none; 
    color: #fff; 
    width: 8%; 
    height: 0; 
    padding-bottom: 8%; 
    margin: 0 2% 0; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    display: inline-block; 
    background: black; 
    text-align: center; 
    vertical-align: middle; 
}

<a class="Previous" href="#"> < </a> 
<a class="Next" href="#"> > </a>

CSS. 내 텍스트를 링크의 응답 성있는 배경 안쪽에 절대 중심으로 가져 오려면 어떻게해야합니까?

출처

2014-01-15 jfudman

. - http://css-tricks.com/snippets/css/a-guide-to-flexbox/ – justinavery

vertical-align CSS 속성은 인라인 또는 표 셀 상자의 세로 맞춤을 지정합니다. 즉 앵커를 table-cell으로 표시하여 vertical-align을 사용하도록 선언해야합니다.

display: inline-block을 display: table-cell으로 변경해보십시오. 또한 플로트를 제거하고 테이블로 표시 할 부모를 변경해야합니다 (또는 그것에 display:table와 앵커의 주위에 새로운 부모를 추가합니다.)합니다

체크 아웃이 바이올린 : 마음에

http://jsfiddle.net/myPTU/2/ 유지를 이 옵션을 사용하면 텍스트가 세로 및 가로로 가운데에 정렬되도록 원하는 결과를 얻을 수 있으므로 앵커가 페이지에 배치되는 방식이 중단 될 수 있습니다. 원하는 결과를 얻을 때까지 부모 요소에 대한 스타일을 재 작업해야 할 수 있습니다.

사이드 참고 : > 및 <로 <a> 태그 사이에보다 큰 및보다 적게보다는 문자를 인코딩해야한다. 예를 들어

: 당신이 인 flexbox 솔루션을보고 내가 제안 브라우저 지원에 만족하는 경우

<a class="Previous" href="#"> &lt; </a> 
<a class="Next" href="#"> &gt; </a>

출처

2014-01-16 18:47:40

사이드 노트는 분명히 높이 평가되었습니다. Michael, thanks – jfudman

응답 배경의 절대 중심 텍스트

답변

관련 문제