0

I don't seem to find the right solution for vertically aligning things. Here is the piece of markup I'm using (note: I'm using Angular and hence {{something}} is replaced with the correct text):

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

What I get is:

Wrong vertical alignment of icon at the right of the legend

The green box with the white flag should be vertically align (middle) with the legend (John Smith...).

Could anyone tell me what I'm doing wrong?

Thanks!!

Improve this question
3
  • Use this margin: 10px; instead of margin: 0 0 10px 10px; Commented Jul 24, 2016 at 12:07
  • Nope. This does not solve the issue. Commented Jul 24, 2016 at 12:25
  • I believe this could be of use phrogz.net/css/vertical-align Commented Jul 24, 2016 at 12:34

2 Answers 2

Reset to default
1

Just add vertical-align: middle; to label tag and it should look properly.

Please see the Plunker.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It is strange (because what is NOT vertically aligned is what follows the label)... but this addition did the trick. Thanks @AlexM for your quick and helpful response.
0

i run it within <!DOCTYPE html> on Chrome, it ok. You can show all the table tags

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.