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>