css dropcap - 글자 높이 맞춤

Question

드롭 캡 효과를 얻을 수 있었지만 나머지 텍스트를 조금 더 높이 옮기고 싶습니다. 당신이 바이올린에서 보면, 텍스트 ("apibus ac ..")는 핑크색 div의 중간에 위치합니다. 나는 이것을 더 높이 옮겨 핑크색 div와 같은 수준에있게하고 싶습니다.

https://jsfiddle.net/pmf4s1g4/

HTML

<div class="topa-list-widget"> 
    <h3>My List</h1> 
    <ul> 
    <li> 
     <a href="#"> 
     Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa 
     </a> 
    </li>           
    </ul> 
    </div> 

CSS

.topa-list-widget ul { 
    list-style: none; 
} 

.topa-list-widget ul li a { 
    text-decoration: none; 
    display: block; 
    line-height: 20px; 
} 

.topa-list-widget ul li a:first-letter { 
    font-size: 20px; 
    background-color: rgba(218, 42, 137, 0.5); 
    padding: 0px 5px !important; 
    margin-right: 1px; 
} 

Answer 1

vertical-align: top; 당신이 여기 원하는 것입니다. , MDN docs에서 :

그것은 [수직 정렬 : 상단]는 첫 문자와 :: 첫번째 라인 :: 적용된다.

.topa-list-widget ul li a:first-letter { 
    font-size: 20px; 
    background-color: rgba(218, 42, 137, 0.5); 
    padding: 0px 5px !important; 
    margin-right: 1px; 
    vertical-align: top; 
} 

JSFiddle.

편집 : 사과, 당신이 중심에 있다고 생각했습니다. 시도하십시오 vertical-align: top. 위의 답변은 이에 맞게 편집됩니다. 그렇게 극단적이지 않은 경우 vertical-align: -50%; (jsFiddle)과 같은 계산식을 사용해보세요.

Answer 2

이 시도 :

.topa-list-widget ul { 
 
    list-style: none; 
 
} 
 

 
.topa-list-widget ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    line-height: 20px; 
 
} 
 

 
.topa-list-widget ul li a:first-letter { 
 
    font-size: 15px; 
 
    background-color: rgba(218, 42, 137, 0.5); 
 
    padding: 0px 3px !important; 
 
    margin-right: 0px; 
 
}

<div class="topa-list-widget"> 
 
    <h3>My List</h3> 
 
        <ul> 
 
         <li> 
 
          <a href="#"> 
 
           Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa 
 
          </a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa</a> 
 
         </li> 
 
        
 
        </ul> 
 
       </div>