Vertically align multiple spans within a div?

Forum Moderators: not2easy

Message Too Old, No Replies

Vertically align multiple spans within a div?

Confusion has set in...

lucidzfl

3:01 pm on May 21, 2013 (gmt 0)

I have attempted multiple ways to vertically align text within a div. I have 2 spans within a div, one with a numeric value that has a font size of 40, and a description next to it, with a size of 14px.

No matter what I do, I cannot get both spans to align vertically in the center within the parent div. I've used vertical-align middle, tried display:table and display: table-cell, line height, everything. Plenty of things vertically align text just fine, but aligning two divs of different font sizes on one line is just not working.

Any assistance is greatly appreciated!

dmorison

3:37 pm on May 21, 2013 (gmt 0)

A display type of "table-cell" should work under HTML5/CSS3...


<!DOCTYPE HTML>
<html>
 <head>
 <style type='text/css'>
 #mydiv {
 background-color: red;
 vertical-align: middle;
 text-align: center;
 height: 200px;
 width: 200px;
 display: table-cell;
 }
 #myspan1 {
 font-size: 40px;
 }
 #myspan2 {
 font-size: 14px;
 }
 </style>
 </head>
 <body>
 <div id='mydiv'>
 <span id='myspan1'>FOO</span>
 <br />
 <span id='myspan2'>BAR</span>
 </div>
 </body>
</html>

Not sure how far / well that will retrograde to older doctypes / browsers but hope this helps!

lucidzfl

3:50 pm on May 21, 2013 (gmt 0)

Hi, thanks so much for the response. Remove the line break between the two spans. You'll see that the overall text is centered, but that FOO and BAR themselves are vertically aligned on the bottom of the line that FOO is aligned to.

(btw, thanks again for the help, seriously!)

dmorison

4:17 pm on May 21, 2013 (gmt 0)

Ah, with you!

I guess it could be done with the correct nesting of table / table-row / table-cell display types, but then you have to ask the question; why not just use a table...

Will have to yield to a CSS specialist on this one - there's probably a grid layout solution (search "css grid") but I'll keep thinking...!

Paul_o_b

7:39 pm on May 21, 2013 (gmt 0)

I'm not sure if this is what you meant but it seems just straight forward to me.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
div {
display:table-cell;
vertical-align:middle;
text-align:center;
height:200px;
width:300px;
margin:auto;
background:red;
border:1px solid #f00;
}
span {
display:inline-block;
vertical-align:middle;
padding:0 10px;
font-size:40px;
}
span + span { font-size:14px; }
</style>
</head>

<body>
<div> <span>100</span> <span>This is the desc</span> </div>
</body>
</html>

Or with wrapping text:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
div {
display:table-cell;
vertical-align:middle;
text-align:center;
height:200px;
width:300px;
margin:auto;
background:red;
border:1px solid #f00;
}
span {
display:inline-block;
vertical-align:middle;
font-size:40px;
width:49%;
}
span + span { font-size:14px; }
</style>
</head>

<body>
<div> <span>100</span> <span>This is the description that runs to 2 lines</span> </div>
</body>
</html>

lucy24

8:44 pm on May 21, 2013 (gmt 0)

but then you have to ask the question; why not just use a table...

Because it isn't a table :)

She said with a straight face, carefully avoiding eye contact with everyone who has ever snooped and seen my navigation footer, which is unequivocally a table, unless you're on a cell phone

You can say "display: table-cell" without constructing a whole table around it-- in particular, you can have a bunch of pseudo-cells without a containing row. And then to be responsive you can toggle the CSS to say things like

@media screen and (max-width: some-small-number-here)
 {
 span.thing-that-used-to-be-cell-like {display: block}
 }

so they end up one above the other if there isn't room to put them side by side. And then, of course, they don't need to be vertically centered any more.

kishor insight

5:55 am on Jun 4, 2013 (gmt 0)

<div style="width:100%; text-align:center; min-width:1200px;">
<span style="display: inline-block; width:300px; height:300px; background-color:#fff; ">
Content
</span>
<span style="display: inline-block; width:300px; height:300px; background-color:#fff;">
Content
</span>

<span style="display: inline-block; width:300px; height:300px; background-color:#fff; margin:0px; padding:0px;">
Content blah blah blah
</span>
</div>

[edited by: incrediBILL at 6:01 am (utc) on Jun 4, 2013]
[edit reason] remioved SIG see TOS [/edit]