HTMLの垂直配置の問題

私は物事を垂直に整列させるための適切な解決策を見つけることができないようです。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>

私は何を得ることは次のとおりです：

ここで私は（私は角使用していますので、{{something}}が正しいテキストに置き換えされていることに注意）使用しているマークアップの一部です白い旗が付いた緑色のボックスは、凡例（John Smith ...）と垂直に整列する必要があります（middle）。

私が間違っていることを教えてもらえますか？

ありがとうございます！

出典

2016-07-24 FDavidov

「margin：0 0 10px 10px;」 –

の代わりに、この「margin：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の垂直配置の問題

答えて

関連する問題