• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1250
  • Last Modified:

How can i make the text vertical align middle in span box?

hi,

how can i make the following box's text align vertical middle?

thanks
<span style="border: 2px solid purple;
			width: 10em;
			height: 10em;
			margin: 2px;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			overflow: hidden;">1 2 3 4 5 6 7 8 9 _ 1 2 3 4 5 6 7 8 9 _ 1 2 3 4 5 6 7 8 9 _ 1 2 3 4 5 6 7 8 9 _ 1 2 3 4 5 6 7 8 9 _ </span>

Open in new window

0
Valimai
Asked:
Valimai
1 Solution
 
scrathcyboyCommented:
SPAN is usually for inline text, not for block level container alignment.  If you want to vertically align text in this, you are better to use a DIV than a span.  There are many ways to do this for DIV, see these --

http://webdesign.about.com/od/beginningcss/a/aa012207.htm
http://www.hicksdesign.co.uk/journal/how-to-vertical-centering-with-css
www.zoffix.com/zoffix/css/vertcenter.shtml
http://phrogz.net/CSS/vertical-align/index.html

basically the vertical-align: middle; does it for a DIV
    .vcenter {
      min-height: 12em;
      display: table-cell;
      vertical-align: middle;
    }
 
    <div class="vcenter">
    <p>This text is vertically centered in the box.</p>
    </div>

Open in new window

0
 
ValimaiAuthor Commented:
hi,

the following works in firefox but not IE. the following link you provided me gives an IE fix using wrappers. So much code, so looks like i wont use it.
www.zoffix.com/zoffix/css/vertcenter.shtml

thanks for your help.
<div style="
		border: 2px solid purple;
		width: 10em;
		height: 10em;
		display: table-cell;
		vertical-align: middle;">
		<p>1 2 3 4 5 6 7 8 9 _ 1 2 3 4 5 6 7 8 9 _ 1 2 3 4 5 6 7 8 9 _ 1 2 3 4 5 6 7 8 9 _ 1 2 3 4 5 6 7 8 9 _</p>
</div>

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now