CODEWITHSUNDEEP
htmlcss
FDavidov
FDavidov

Reputation: 3675

HTML vertical alignment issue

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

Upvotes: 0

Views: 51

Answers (2)

Alex M
Alex M

Reputation: 2836

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

Please see the Plunker.

Upvotes: 1

kollein
kollein

Reputation: 406

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

Upvotes: 0

Related Questions