HTML垂直对齐问题

我似乎找不到垂直对齐的正确解决方案。下面是标记的一块我使用（注意：我使用的角度，因此{{something}}被替换为正确的文本）：HTML垂直对齐问题

<td style="width:55%;text-align:center;vertical-align:middle"> 
    <font size="3" color="#0B3861"> 
     <label style="max-width:150px;background:#BDBDBD;border-radius:15px;padding:5px 10px 5px 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis" 
       title="{{Legend}}" 
       dir="auto"> 
      <b> 
       {{Legend}} 
      </b> 
     </label> 
    </font> 
    <span type="button" 
      ng-model="Notifs" 
      ng-click="Present_Notifications()" 
      style="background:green;padding:0 4px 0 4px;cursor:pointer;margin:0 0 10px 10px;height:50px"> 
     <font size="2" color="white"> 
      <i class="glyphicon glyphicon-flag"> </i> 
     </font> 
    </span> 
</td>

我得到的是：

带有白旗的绿色框应该与图例（John Smith ...）垂直对齐（中间）。

有人能告诉我我做错了什么吗？

谢谢！

来源

2016-07-24 FDavidov

使用此'margin：10px;'而不是'margin：0 0 10px 10px;' –

不可以。这并不能解决问题。 – FDavidov

我相信这可能是有用的http://phrogz.net/css/vertical-align/ – Zze

只需将vertical-align: middle;添加到label标记中，就可以正常显示。请参阅Plunker。

来源

2016-07-24 12:38:27

这很奇怪（因为什么不是垂直对齐的是标签后面的内容）......但是这个添加却做到了这一点。感谢@AlexM为您提供快速有效的响应。 – FDavidov

我在Chrome上运行<!DOCTYPE html>，它没问题。您可以显示所有标签

来源

2016-07-24 12:29:18 kollein

HTML垂直对齐问题

回答

相关问题