アンカータグの内側にスパンの中心を合わせる

Question

<div> 
     <ul> 
      <li class="dropdown"> 
      <a href="link" class="col-xs-12"> 
       <span class="dropdown-toggle" data-toggle="dropdown"> 
        <span id="image" class="col-xs-3"><img src="/home" width="100" height="100" /></span> 
        <span id="display_name" class="col-xs-6"> @Name </span> 
        <span class="caret"></span> 
       </span> 
       </a> 
      </li> 
     </ul> 
    </div> 

名前を含むセンタースパン要素が必要です。アンカータグの中央に常に配置されています。私はタグの高さと行の高さを設定したくありません。名前の長さが異なる可能性があるためです。タグの高さも異なります。名前が何であっても、それを中心に並べる必要があります。これを達成する方法は？

Answer 1

このdisplay:tableとdisplay:table-cellの構造を使用して、垂直に整列させます。上記のスニペットで

a { 
 
    display: table; 
 
} 
 
a span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div> 
 
    <ul> 
 
    <li class="dropdown"> 
 
     <a href="link" class="col-xs-12"> 
 
     <span class="dropdown-toggle" data-toggle="dropdown"> 
 
        <span id="image" class="col-xs-3"><img src="/home" width="100" height="100" /></span> 
 
     <span id="display_name" class="col-xs-6"> @Name<br>@Name<br>@Name </span> 
 
     <span class="caret"></span> 
 
     </span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>

関係なく名前でどのくらいの時間が自動的に

Answer 2

CSS-トリックを中央に配置していないだろう物事を中心にする方法についてguideを持って、縦方向または横方向。

.parent { 
position: relative; 
} 
.child { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

これはあなたのコードで実装、それは次のようになります、ということを意味します

<div> 
    <ul> 
     <li class="dropdown"> 
     <a href="link" class="col-xs-12"> 
      <span class="dropdown-toggle" data-toggle="dropdown"> 
       <span id="image" class="col-xs-3"><img src="/home" width="100" height="100" /></span> 
       <span id="display_name" class="col-xs-6"> @Name </span> 
       <span class="caret"></span> 
      </span> 
      </a> 
     </li> 
    </ul> 
</div> 

CSS：位置決めが絶対的であることから

.col-xs-12{ 
    position: relative; 
} 
.col-xs-6{ 
    position: absolute; 
    top:50%; 
    transform: translateY(-50%); 
} 

これは、少し調整が必要になる場合があります2つの要素がありますが、うまくいくはずです。