Welcome to WebmasterWorld Guest from 54.158.10.156

Forum Moderators: not2easy

Message Too Old, No Replies

Vertically align multiple spans within a div?

Confusion has set in...

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

New User

joined:May 21, 2013
posts:2
votes: 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!
3:37 pm on May 21, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 3, 2003
posts:1633
votes: 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!
3:50 pm on May 21, 2013 (gmt 0)

New User

joined:May 21, 2013
posts:2
votes: 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!)
4:17 pm on May 21, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 3, 2003
posts:1633
votes: 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...!
7:39 pm on May 21, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts:198
votes: 4


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>
8:44 pm on May 21, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


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.
5:55 am on June 4, 2013 (gmt 0)

New User

joined:June 1, 2013
posts:6
votes: 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]