homepage Welcome to WebmasterWorld Guest from 54.197.183.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Vertically align multiple spans within a div?
Confusion has set in...
lucidzfl



 
Msg#: 4576210 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4576210 posted 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



 
Msg#: 4576210 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4576210 posted 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

10+ Year Member



 
Msg#: 4576210 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4576210 posted 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



 
Msg#: 4576210 posted 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved