텍스트를 세로로 정렬하는 방법은 무엇입니까?

Question

텍스트를 here 세로로 CSS와 정렬하는 가장 쉬운 방법은 무엇입니까?

<ul> 
    <li>Hello</li> 
    <li>Bye Bye</li> 
    <li>Ciao</li> 
</ul> 

li { 
    border: 1px solid black; 
    width: 100px; 
    height: 50px; 
    margin-bottom: 20px; 
    text-align: center; 
} 

Answer 1

한 줄의 텍스트가있는 경우 line-height을 height과 동일한 값으로 설정할 수 있습니다. 이것은 모든 요소에 적용됩니다.

Answer 2

해키,하지만 아마도 가장 쉬운 방법 : 당신은 목록 항목 총알 대신에 배경 이미지를 추가해야합니다

li { 
    display: table-cell; 
    vertical-align: center; 
} 

.

Answer 3

당신이 항상 일치 할 수한 줄을 가운데거야 알고 있다면 height 및 line-height

li { 
    ... 
    height: 50px; 
    line-height: 50px; 
    ... 
} 

Answer 4

수직 - 정렬 특성보십시오 :

http://www.w3schools.com/css/pr_pos_vertical-align.asp

Answer 5

퍼팅을 줄 높이와 텍스트와 테두리 사이의 간격을 만드는 것이 좋습니다. 하지만 이것은 최선의 방법은 아닙니다. 줄 높이는 여백 또는 패딩을 만들기위한 것이기 때문에 아닙니다. 이는 두 텍스트 줄 사이에 간격을 만들기위한 것입니다 (단락의 두 줄 사이의 간격).

그래서 작업이 완료되면 여백이나 패딩을 넣어야합니다. 더 나은 옵션은 여백을 두는 것입니다 (그러나 이것은 정렬이 아닙니다. 또한 텍스트를 "p"태그 또는 "span"태그 (텍스트를 감싸는 데 사용할 수있는 태그)에 넣으십시오. verticaly 정렬 만드는 것은 필수 인 경우

HTML 코드,

<ul> 
    <li><span>Hello</span></li> 
    <li><span>Bye Bye</span></li> 
    <li><span>Ciao</span></li> 
</ul> 

CSS 코드,

ul li span { 
    margin-top: 5px; 
} 

, 여기에 코드입니다.

ul li { 
    position: relative; 
    } 

    ul li span { 
     position: absolute; 
     top: 50%; 
     font-size: 12px; /* change this as your need. */ 
     line-height: 12px; /* keep this value same as font-size. */ 
     margin-top: -6px; /* half value from the font-size. */ 

}