Bootstrap - Symbol vertikal in der Liste ausrichten

Question

Ich habe eine Webseite, die Bootstrap 3 verwendet. Auf dieser Seite muss ich ein Symbol vertikal in einer Inline-Liste ausrichten. Dieses Symbol befindet sich in einem Kreis. Also wirklich, ich möchte den gesamten Kreis vertikal ausrichten. Ich habe ein Bootply-Setup here. In diesem Bootply habe ich den folgenden Code:

<div class="row"> 
    <div class="col-xs-12"> 
    <ul class="list-inline"> 
     <li><div class="circle text-center"><i class="fa fa-star" style="font-size:18px; padding-top:6px;"></i></div></li> 
     <li> 
     <a href="https://www.example.com" style="font-size:16px;">Some Page</a> 
     <div style="font-size:14px;">A longer line of test that describes the link</div> 
     </li> 
    </ul>  
    </div> 
</div> 

Wie zentriere ich vertikal den Inhalt in der ersten li bezogen auf den Gehalt in der zweiten li?

Vielen Dank!

Answer 1

Verwenden Sie einfach vertical-align: middle;

.list-inline>li { 
    vertical-align: middle; 
} 

http://www.bootply.com/BxgnmdnKZt

Auch Sie können stattdessen ..

<ul class="media"> 
     <li class="media-left media-middle"><div class="circle text-center"><i class="fa fa-star" style="font-size:18px; padding-top:6px;"></i></div></li> 
     <li class="media-right"> 
     <a href="https://www.example.com" style="font-size:16px;">Some Page</a> 
     <div style="font-size:14px;">A longer line of test that describes the link</div> 
     </li> 
    </ul> 

http://www.bootply.com/pR9JHBBSAE

mit dem media Objekt zu prüfen,