목록 스타일 지정하기 - 빈 공간을 없애고 리의 가운데에 텍스트 넣기

Question

질문이 명확하지 않은 경우 미안하지만 어떻게해야할지 모르겠다.

그리고 지금은 다음과 같습니다 :

li{ 
    font-family: courier, monospace; 
    color: blue; 
    font-weight: bold; 
    height: 30px; 
} 
ol>li:nth-child(odd){ 
    background-color: #fff; 
} 
.originalni{ 
    color: d00; 
} 
h2{ 
    font-family: courier, monospace; 
} 
ol{ 
    width: 300px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #aaa; 
    background-color: #ddd; 
    list-style-position: inside; 
} 

PHP 코드 : 이것은 CSS 코드

이 같은 목록 스타일을 할 필요가 :

echo "<ol>"; 
    for ($i = 0; $i <= 6; $i++){ 
     if ($tabela[$i][2] == "solsejalec"){ 
      echo "<li class=\"originalni\">".$tabela[$i][1]."</li>"; 
     } 
     else{ 
      echo "<li>".$tabela[$i][1]."</li>"; 
     } 
    } 
echo "</ol>"; 

누군가 나를 올바르게 스타일링 할 수있게 도와 줄 수 있습니까? 왼쪽의 빈 공간을 없애고 li의 중간에 텍스트를 넣어야합니다 (세로 방향). 아, 텍스트 색상, 스타일 및 가족을 무시하십시오.

Answer 1

왼쪽의 공백은 <ol>의 기본 패딩입니다. 그래서 padding:0; 도움이됩니다.
가운데에있는 텍스트를 <li> 세로로 가져 오려면 line-height으로 게임해야하며 line-height은 <li>과 같은 높이로 설정할 수 있습니다. 귀하의 경우 30px.

이 3 줄을 CSS에 추가하십시오. 결과는 DEMO입니다.

ol {padding: 0;} 
li { 
    ... 
    line-height:30px; 
    padding: 0 0 0 7px; 
} 

이렇게해야합니다.

DEMO