中心对齐锚定标记内的跨度

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%); 
} 

这可能需要一些调整，因为定位是绝对的还有另外两个元素，但它应该可以工作得很好。