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>

我需要包含名称的中心span元素始终在anchor标签的中间对齐。我不想设置标签的高度和行高。因为名称长度可能会有所不同。因此标签高度也会有所不同。无论输入什么名称，我都需要将其与中心对齐。怎么做到这一点？

Answer 1

使用此display:table和display:table-cell结构将其垂直对齐到中心。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在上面的片段中，无论名称多长，它都会自动将其与中心对齐

Answer 2

CSS-tricks有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 个答案: