CODEWITHSUNDEEP
htmlcss
comp sci balla
comp sci balla

Reputation: 823

Div formatting: center text vertically

This code genereates a sequence of: block,text,block,text,block,text and it looks about right except that I can't get the text to vertically align in the center of the div so it looks like its aligned next to the center of the boxes vertically. Any advice?



    <div style="position: absolute; right: 0; top: 0; text-align: right;">
    <span style="display: inline-block; width: 15px; height: 15px; background: #2880BB"></span>                                     
    <span style="display: inline-block">Created   </span>                                            
    <span style="display: inline-block; width: 15px; height: 15px; background: #7FC31B"></span>
    <span style="margin-left: 5px;">Won   </span>
    <span style="display: inline-block; width: 15px; height: 15px; background: #FD2A2F"></span>
    <span style="margin-left: 5px;">Lost </span>
    </div>

Upvotes: 0

Views: 777

Answers (7)

Hovhannes Sargsyan
Hovhannes Sargsyan

Reputation: 1083

I set the div as display:table and the spans as display:table-cell, so now you can set vertical-align like in table mode.

http://jsfiddle.net/w2wVc/10/

Upvotes: 0

Yosra Nagati
Yosra Nagati

Reputation: 790

my suggest is to put every <span> and its box in one div then clear right of every div

clear: right

Upvotes: 0

Naveen Web Solutions
Naveen Web Solutions

Reputation: 735

I've used position:relative and top:2px in your css. Change top pixel value as requirement.

<div style="position: absolute; right: 0; top: 0; text-align: right;">
<span style="display: inline-block; position:relative; top:2px; width: 15px; height: 15px; background: #2880BB"></span>                                     
<span style="display: inline-block">Created   </span>                                            
<span style="display: inline-block; position:relative; top:2px; width: 15px; height: 15px; background: #7FC31B"></span>
<span style="margin-left: 5px;">Won   </span>
<span style="display: inline-block; position:relative; top:2px; width: 15px; height: 15px; background: #FD2A2F"></span>
<span style="margin-left: 5px;">Lost </span>
</div>

Upvotes: 0

CoderMarkus
CoderMarkus

Reputation: 1118

I have tried this a number of times with CSS and never had any luck (with good cross browser support). I was able to get it working with some Jquery.

http://jsfiddle.net/EebmV/1/

Of you could go old school and use a table. Table cells have always working for vertical alignment.

UPDATE:

Re-saved with the Jquery library referenced correctly.

Upvotes: 0

Alfred
Alfred

Reputation: 21386

You may try using a -ve margin to text. Here is a live demo.

Upvotes: 0

stealthyninja
stealthyninja

Reputation: 10371

Alternate solution:

<div style="position: absolute; right: 0; top: 0; text-align: right;">
    <span style="border-left: 15px solid #2880BB; padding-left: 5px;">Created</span>                                            

    <span style="border-left: 15px solid #7FC31B; margin-left: 5px; padding-left: 5px">Won</span>

    <span style="border-left: 15px solid #FD2A2F; margin-left: 5px; padding-left: 5px">Lost</span>
</div>​

jsFiddle: http://jsfiddle.net/w2wVc/1/

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Instead of height, you can use line-height to center text vertically. Check out this code:

HTML:

<div class="vertical">
    Hello
</div>

CSS:

.vertical {line-height: 50px; border: 1px solid #f00;}

Fiddle: http://jsfiddle.net/rv8pq/

Upvotes: 0

Related Questions