어떻게하면 CSS를 사용하여 LI 내의 앵커 텍스트를 가운데 맞춤 할 수 있습니까?

Question

이 질문에 대한 변형이 여러 번 요청되었습니다. CSS를 사용한 수직 중심 맞춤은 어려운 일입니다.

필자에게는 특정 시나리오가 있는데, 가로로 표시된 목록을 처리합니다. 마크 업이 같다 :

<ul id='ul1' class='c'> 
    <li><a href='javascript:void(0)'>Fribble Fromme</a></li> 
    <li><a href='javascript:void(0)'>Fobble</a></li> 
    <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li> 
    </ul> 

스타일은 다음과 같이이다 :

ul.c { 
    height:52px; 
    text-align:center; 
    } 
    ul li a { 
    float:left; 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    line-height:1em; 
    width:100px; 
    } 
    ul li a:hover { 
    background: #CCC; 
    } 
    ul li { 
    height:52px; 
    display:inline-block; 
    } 

결과 목록은 다음과 같습니다

하지만 모든 상자가되고 싶어 동일한 높이로 텍스트를 각 상자에 세로로 가운데 놓기를 원합니다. A 요소에 대해 height 스타일을 추가하여 상자 높이를 설정할 수 있습니다. 내가 원하는에 가까운

을 ...하지만 수직 중심이 발생되지 않습니다 결과는 다음과 같습니다.

as suggested in this post 텍스트의 경우 line-height으로 세로 가운데 맞춤을 설정할 수 있습니다. 어떤 요소가 여러 줄의 텍스트를 얻는지를 알고 있다면 다른 A 요소에 대해 다른 값인 line-height을 선택할 수도 있습니다. 그러나 어느 것이 여러 줄을 요구할지는 모르겠습니다.

A 요소 중 일부가 줄 바꿈 문자가있는 경우 어떻게 가운데에 배치 할 수 있습니까?

Answer 1

당신은 함께 display:table 등을 사용할 수 vertical-align:middle

ul.c { 
    text-align:center; 
    display:table; 
} 

ul li { 
    float:left;  
} 

ul li a { 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    width:100px; 
    height:52px; 
    display:table-cell; 
    vertical-align:middle; 
} 

ul li a:hover { 
    background: #CCC; 
} 

예와 : 동일한에 높이와 라인 높이를 설정 한 CSS의http://jsfiddle.net/kf52n/2/

Answer 2

CSS에서이 작업을 수행 할 수 없습니다. 내가 찾은 그 내가 할 수있는 자바와 함께, padding-top 및 padding-bottom 런타임에 적절한 값을 설정. 이 기법은 A 요소의 "자연스러운"높이를 측정 한 다음 A 요소가 수직 가운데에 위치하도록 패딩을 설정하는 것입니다. 하나는 명시 적으로는 A 요소 높이 또는 패딩을 설정하지 않아야의 CSS에서

function setHeightIntelligently(ulElement) { 
    var items, L1, i, anchor, availableHeight = ulElement.clientHeight, 
     naturalHeight, pad; 
    items = ulElement.children; 
    for(i=0, L1 = items.length;i<L1;i++){ 
     if (items[i].tagName.toUpperCase() == 'LI') { 
     anchor = items[i].children[0]; 
     naturalHeight = anchor.clientHeight; 
     pad = (availableHeight - naturalHeight)/2; 
     anchor.style.paddingTop= pad+'px'; 
     anchor.style.paddingBottom= pad+'px'; 
     } 
    } 
    } 

    function init() { 
    var element = document.getElementById('ul1'); 
    setHeightIntelligently(element); 
    } 

:

여기에 필요한 JS 코드입니다. 그렇게하면 자연스러운 높이가 우리가 필요로하는 것과 같지 않게됩니다.

결과는 다음과 같다 :

가, 행동에 go here 그것을 볼 수 있습니다.

Answer 3

. 그러면 직사각형 상자가 생깁니다.상단 하단;

하지만 여전히 바닥에 공간을보고있는 것은 이유가 패딩 두 값을 추가 패딩

에 기인는 상단과 하단 여백을

패딩을 추가

2와 12이므로 거대한 공간을 볼 수 있습니다.

이

height: 52px; 
line-height:52px; 
padding: 6px 6px; // here you have to tweak and see the output 
vertical-align:center; 

날이

Answer 4

오래된 질문을하고있다 알려하려고 노력하지만, 대답은 지금 인 flexbox으로 업데이트 할 수 있습니다.

a { 
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}