Проблема вертикального выравнивания 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>

Что я получаю:

Зеленая коробка с белым флагом должна быть вертикально выровнена (середина) с легендой (Джон Смит ...).

Может ли кто-нибудь сказать мне, что я делаю неправильно?

Спасибо!

источник

2016-07-24 FDavidov

Используйте этот «margin: 10px;» вместо «margin: 0 0 10px 10px;' –

Nope. Это не решает проблему. – FDavidov

Я считаю, что это может быть полезно http://phrogz.net/css/vertical-align/ – Zze

Просто добавьте vertical-align: middle; в label и он должен выглядеть правильно.

См. Plunker.

источник

2016-07-24 12:38:27

Странно (потому что то, что НЕ вертикально выровнено, следует за меткой) ... но это дополнение сделало трюк. Спасибо @AlexM за ваш быстрый и полезный ответ. – FDavidov

Я запустил его в пределах <!DOCTYPE html> на Chrome, это нормально. Вы можете показать все табличные теги

источник

2016-07-24 12:29:18 kollein

Проблема вертикального выравнивания HTML

ответ

Смежные вопросы